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 usePa
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
Next.js Functions: redirect
Next.js 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. One of its features is redirect Function. In this article, we will learn abou
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
Functions in Next JS
Next.js provides a suite of functions and hooks that enhance server-side rendering, static generation, routing, and more. These functions are essential for managing data fetching, handling requests, and optimizing performance in Next.js applications.Next.js FunctionsNext.js functions simplify server
4 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
Next.js Injecting the router
In this article, we will learn how we can inject the router into our NextJS project. NextJS is a React-based framework. It has the power to Develop beautiful Web applications for different platforms like Windows, Linux, and mac. Next.js has a file-system-based router built on the concept of pages. W
3 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
How to Get URL pathname in Next.js?
Next.js is a powerful React framework that simplifies the process of building server-rendered and statically generated web applications. One common requirement in web development is to get the URL pathname, which can be useful for various purposes such as conditional rendering, routing, and analytic
3 min read