How to get the current path in Next.js?

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.