How to get the current pathname in the app directory of Next.js?
NextJS is a React framework that is used to build full-stack web applications. It is used both for front-end as well as back-end. It comes with a powerful set of features to simplify the development of React applications. In this article, we will learn about How to get the current pathname in the app directory of NextJS.
Approach to get the current pathname
We are going to use a usePathname hook. usePathname hook is a client component hook. It is used to get a current URL’s pathname. To use a usePathname hook, We need to import it from the “next/navigation” module and we also have to our component to the client component using the “use client” keyword.
Syntax:
'use client';
import { usePathname } from "next/navigation";
export default function Page() {
const pathname = usePathname()
return (
<>
<h1>{pathname}</h1>
</>
);
}
Steps to Setup a NextJS App
Step 1: Create a NextJS application using the following command and answer a few questions.
npx create-next-app@latest app_name
Step 2: It will ask you some questions, so choose as the following.
√ Would you like to use TypeScript? ... No
√ Would you like to use ESLint? ... Yes
√ Would you like to use Tailwind CSS? ... No
√ Would you like to use `src/` directory? ... Yes
√ Would you like to use App Router? ... Yes
√ Would you like to customize the default import alias (@/*)? ... No
Step 3: After creating your project folder, move to it using the following command.
cd app_name
Project Structure:
Example 1: The below example demonstrate to get the current pathname.
//File path: src/app/layout.js
'use client';
import Link from "next/link";
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
<ul>
<li><Link href={'/'}>Home</Link></li>
<li><Link href={'/about'}>About</Link></li>
<li><Link href={'/contact'}>Contact</Link></li>
</ul>
{children}
</body>
</html>
);
}
//File path: src/app/page.js
'use client';
import { usePathname } from "next/navigation";
export default function Home() {
const pathname = usePathname()
return (
<>
<h1>Home Page</h1>
<h2>Current Path: {pathname}</h2>
</>
);
}
//File path: src/app/contact/page.js
'use client';
import { usePathname } from "next/navigation";
export default function Page() {
const pathname = usePathname()
return (
<>
<h1>Contact Page</h1>
<h2>Current Path: {pathname}</h2>
</>
)
}
//File path: src/app/about/page.js
'use client';
import { usePathname } from "next/navigation";
export default function Page() {
const pathname = usePathname()
return (
<>
<h1>About Page</h1>
<h2>Current Path: {pathname}</h2>
</>
)
}
Start your application using the command:
npm run dev
Output:
To get the current pathname
Example 2: The below example demonstrate to implement active nav link using usePathname hook.
//File path: src/app/layout.js
'use client'
import { usePathname } from 'next/navigation'
import Link from 'next/link';
import './globals.css'
export default function RootLayout({ children }) {
const pathname = usePathname()
return (
<html lang="en">
<body>
<nav>
<Link
className={`${pathname === '/' ? 'active' : ''}`}
href="/">
Home
</Link>
<Link
className={`${pathname === '/about' ? 'active' : ''}`}
href="/about">
About
</Link>
<Link
className={`${pathname === '/contact' ? 'active' : ''}`}
href="/contact">
Contact
</Link>
</nav>
{children}
</body>
</html>
);
}
//File path: src/app/page.js
export default function Home() {
return (
<>
<h1>Home Page</h1>
</>
);
}
//File path: src/app/contact/page.js
export default function Page() {
return(
<>
<h1>Contact Page</h1>
</>
)
}
//File path: src/app/about/page.js
export default function Page() {
return(
<>
<h1>About Page</h1>
</>
)
}
Start your application using the command:
npm run dev
Output:
To implement active nav link using usePathname hook
Contact Us