Loading...

How to get the current path in Next.js?

question nextjs react
Ram Patra Published on July 19, 2024
Next.js 13 onwards

To get the current path in a Next.js application, you can use the usePathname hook from next/navigation module. This hook allows you to access the current pathname within your components. Here’s how you can use it:

  1. Install Next.js: Make sure you have Next.js installed. If you don’t, you can set up a new Next.js project by running:

    npx create-next-app@latest
    
  2. Create or Update a Component: Use the usePathname hook in your component to get the current path. Below is an example of how to do this:

    // Import the necessary modules
    import { usePathname } from 'next/navigation';
    
    const CurrentPath = () => {
      // Use the usePathname hook to get the current path
      const pathname = usePathname();
    
      // Render the current path
      return (
        <div>
          <h1>Current Path</h1>
          <p>{pathname}</p>
        </div>
      );
    };
    
    export default CurrentPath;
    
  3. Use the Component: You can now use this component in any part of your Next.js application where you need to display or use the current path.

Here’s a more complete example to demonstrate how you might include this in a Next.js page:

// app/page.jsx
import CurrentPath from '../components/CurrentPath';

const HomePage = () => {
  return (
    <div>
      <h1>Home Page</h1>
      <CurrentPath />
    </div>
  );
};

export default HomePage;

In this example:

  • usePathname is imported from next/navigation.
  • usePathname hook is called within the CurrentPath component to get the current path.
  • The current path is displayed within a <p> tag.

This will dynamically show the current path whenever the component is rendered, which is useful for navigation highlights, breadcrumbs, or any feature dependent on the current route in your Next.js application.

One example can be to conditionally show a button like below:

{pathname === '/' && (
  <button onClick={handleClick}>About Button</button>
)}
{pathname === '/about' && (
  <button onClick={handleClick}>Home Button</button>
)}

Note: The component has to be a client component in order to use the usePathname hook.

Presentify

Take your presentation to the next level.

FaceScreen

Put your face and name on your screen.

ToDoBar

Your to-dos on your menu bar.

Ram Patra Published on July 19, 2024
Image placeholder

Keep reading

If this article was helpful, others might be too

question nextjs react February 9, 2024 How to make an HTML button element behave like a Link component in Next.js?

In Next.js, you can use the Link component from next/link to create client-side navigation. However, if you want to use an HTML button element (<button>) to behave like a link, you can wrap it with the Link component. Here’s how you can do it:

question nextjs front-end July 21, 2024 How to fix Next.js generating Open Graph images with localhost in the url?

This happens when you have not set the metadata properly. Just make sure you have set the metadataBase property like below:export const metadata = { metadataBase: new URL('https://rampatra.com'), // other configs}Learn more from the official docs.

question nextjs react November 17, 2024 How to define metadata in a client component in Nextjs?

Nextjs does not allow defining the metadata object in client components. There are a couple of ways to resolve this problem. I will be talking about two of them here.