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 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 February 9, 2024 Main advantages of using the Link component in Next.js over Anchors and Buttons

The main advantage of using the Link component in Next.js for client-side navigation is its optimized prefetching behavior, which enhances the performance and user experience of your web application. Here’s a breakdown of the key advantages:

question nextjs react July 18, 2024 How to programmatically navigate to a page in Next.js?

In Next.js, you can programmatically navigate to different pages using the useRouter hook from the next/navigation module. This hook provides a convenient way to navigate between pages within your Next.js application. Below is an example demonstrating how to use the useRouter hook to programmatically navigate to another page.