Next.js Functions: usePathname
Last Updated :
24 Jul, 2024
Next.js is a JavaScript framework library used to build fast and scalable web applications with server-side rendering and static site generation capabilities. One of the useful hooks provided by Next.js is usePathname, which allows developers to easily access and manipulate the current pathname of the URL in a functional component. This can be particularly helpful for tasks like conditionally rendering components based on the URL or for logging and analytics purposes.
usePathname Function
The usePathname function in Next.js is a hook that retrieves the current pathname from the URL, allowing developers to access it within their functional components. This can be useful for dynamic routing and conditional rendering based on the current path.
Syntax
import { usePathname } from 'next/navigation';
const MyComponent = () => {
const pathname = usePathname();
return (
<div>
Current Path: {pathname}
</div>
);
};Steps To Implement usePathname Function:
Step 1: Create a Next.js application using the following command.
npx create-next-app@latest gfg
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? (recommended) ... Yes
√ Would you like to customize the default import alias (@/*)? ... Yes
Step 3: After creating your project folder i.e. gfg, move to it using the following command.
cd gfg
Folder Structure
Next.js Folder StructureDependencies
"dependencies": {
"react": "^18",
"react-dom": "^18",
"next": "14.2.5"
},Example: The below example demonstrates the use of usePathname function.
In this example, we are using the usePathname function from Next.js to retrieve and display the current pathname in various components. The HomePage, AboutPage, and ContactPage components each use usePathname to show the current URL path within their respective content. Additionally, navigation links are provided to switch between these pages, demonstrating dynamic path updates and rendering.
JavaScript
// src/app/page.js
"use client";
import { usePathname } from "next/navigation";
import Link from "next/link";
export default function HomePage() {
const pathname = usePathname();
return (
<main style={{ padding: "16px" }}>
<h1 style={{ fontSize: "24px", fontWeight: "bold", color: "green" }}>
GeeksforGeeks
</h1>
<h3 style={{ fontSize: "20px", marginTop: "16px" }}>
NextJS: usePathname Example
</h3>
<p style={{ marginTop: "16px" }}>
Current Pathname: <strong>{pathname}</strong>
</p>
<div style={{ marginTop: "24px" }}>
<h4 style={{ fontSize: "18px", fontWeight: "bold" }}>Navigate to:</h4>
<ul style={{ listStyleType: "disc", marginTop: "8px" }}>
<li>
<Link
href="/"
style={{ color: "blue", textDecoration: "underline" }}
>
Home
</Link>
</li>
<li>
<Link
href="/about"
style={{ color: "blue", textDecoration: "underline" }}
>
About
</Link>
</li>
<li>
<Link
href="/contact"
style={{ color: "blue", textDecoration: "underline" }}
>
Contact
</Link>
</li>
</ul>
</div>
</main>
);
}
// \src\app\about\page.js
"use client";
import { usePathname } from "next/navigation";
import Link from "next/link";
export default function AboutPage() {
const pathname = usePathname();
return (
<main style={{ padding: "16px" }}>
<h1 style={{ fontSize: "24px", fontWeight: "bold", color: "green" }}>
About Page
</h1>
<p style={{ marginTop: "16px" }}>
Current Pathname: <strong>{pathname}</strong>
</p>
<Link href="/" style={{ color: "blue", textDecoration: "underline" }}>
Go back to Home
</Link>
</main>
);
}
// src/app/contact/page.js
"use client";
import { usePathname } from "next/navigation";
import Link from "next/link";
export default function ContactPage() {
const pathname = usePathname();
return (
<main style={{ padding: "16px" }}>
<h1 style={{ fontSize: "24px", fontWeight: "bold", color: "green" }}>
Contact Page
</h1>
<p style={{ marginTop: "16px" }}>
Current Pathname: <strong>{pathname}</strong>
</p>
<Link href="/" style={{ color: "blue", textDecoration: "underline" }}>
Go back to Home
</Link>
</main>
);
}
To run the Application open the terminal in the project folder and enter the following command:
npm run dev
Output:
Next.js Functions: usePathname