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
Similar Reads
Next.js Functions: useParams
Next.js is known for its ability to create dynamic and highly optimized web applications. Among them, useParams allows you to access route parameters and enhance the interactivity and functionality of the applications. In this article, we will explore what useParams is and how it works. What is useP
4 min read
p5.js | setPath() Function
The setPath() function is an inbuilt function in p5.js library. This function is used to reset the source for the SoundFile of new path. Syntax: setPath(path, callback) Note: All the sound-related functions only work when the sound library is included in the head section of the index.html file. Para
1 min read
D3.js path.lineTo() Function
The path.lineTo() function is used to draw a line to a given point from the current set of points. Syntax: path.lineTo(x, y); Parameters: It takes two parameters as mentioned above and described below. x: It is the x-position of the point to which line is to be drawn.y: It is the y-position of the p
2 min read
D3.js node.path() Function
The node.path() function in d3.js is used return the shortest path between the source and destination node. Syntax: node.path(target); Parameters: This function accepts single parameter as given above and described below: target: This parameter accepts a destination node. Return Value: This function
2 min read
D3.js | Path.moveTo() Function
D3.js is mostly used for making of graph and visualizing data on the HTML svg elements. D3 somehow is related to Data Driven Documents. The Path.moveTo() function is used to move a point inside the svg element. This library is also capable enough to draw simulations, 2D graphs and 3D graphs and used
2 min read
D3.js namespace() Function
The d3.namespace() function is used to return an object that contains space and local attributes that describe the full namespace URL and the local name. If there is a colon in the name than the string on the left side of the colon is a namespace prefix. Syntax: d3.namespace(name); Parameters: This
1 min read
p5.js setup() Function
The setup() function runs when the program starts. It is used to set the initial environment properties such as text-color, screen size, background-color and load the media file such as images and fonts. The program contains only one setup() function. The setup() function can not be called again aft
2 min read
D3.js | Path.rect() Function
D3.js is a library in Javascript, this library is mostly used for making of graph and visualizing data on the HTML SVG elements. D3 stands for Data Driven Documents and mostly used for data visualization. The Path.rect() is used to make a rectangle in a svg element. Syntax: Path.rect(x, y, w, h); Pa
2 min read
page.js in Next JS
In Next.js, page.js is a file commonly used to define individual pages of your application. Each page is a React component that represents a route in your application. The page.js file is crucial for routing and rendering content in your Next.js project.In this article, we will see about the pages a
4 min read
JavaScript Nested functions
A nested function (also known as an inner function) is a function that is declared within another function (known as the outer function). The inner function has access to the variables of its outer function, forming a lexical scope chain. [GFGTABS] JavaScript function outer() { console.log('This
5 min read