How to Get URL pathname in Next.js? - Coding

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 analytics. In this article, we will explore different methods to get the URL pathname in a Next.js application.

Table of Content

What is an URL pathname?
Get URL pathname in Pages router
Get URL pathname in App router
Conclusion

Prerequisites:

React.js
Basic understanding of Next.js

What is an URL pathname?

The URL pathname is the part of the URL that comes after the domain name, including the initial slash. For example, in the URL https://horje.org/about, the pathname is /about. Knowing how to retrieve the pathname can help in various cases, such as displaying different content based on the current route or logging user activity.

Steps to Get URL pathname in Next.js

We will be using pnpm as the package manager and TypeScript, though you can use npm and JavaScript without any difference.

Step 1: Create a next.js project using the following command.

Navigate to desired directory and type the following command in terminal

pnpm create next-app@latest

Next.js Project Setup

Folder structure

Get URL pathname in Pages router

In pages router, [Tex]useRouter()[/Tex] hook is used to get pathname and slug of dynamic routes.

Example 1: Getting the pathname

JavaScript

//pages/pages-router/index.tsx
import { useRouter } from "next/router";

export default function PagesRouter() {
   const router = useRouter();  
   return <div>Pages Router: {router.pathname}</div>;
}

Output

Screenshot_20240503_163308

Example 2: Getting slug of a dynamic route.

A dynamic route is created by wrapping in square brackets: [segmentName]. For example [id], [slug]

JavaScript

//pages/pages-router/[slug]/index.tsx
import { useRouter } from "next/router";

export default function PagesRouter() {
    const router = useRouter();  
    return <div>Pages Router Slug: {router.query.slug}</div>;
}

Output

Screenshot_20240503_172953

Example 3: Getting the whole pathname of a dynamic Router

JavaScript

//pages/pages-router/[slug]/index.tsx
import { useRouter } from "next/router";

export default function PagesRouter() {
    const router = useRouter();
  
    return <div>Dynamic page: {router.asPath}</div>;
}

Output

Screenshot_20240503_173125

Get URL pathname in App router

Client Component

In client component [Tex]usePathname()[/Tex] hook is used to get pathname.

JavaScript

"use client";

import { usePathname } from "next/navigation";

const Page = () => {
    const pathname = usePathname();  
    return <div>Current path: {pathname}</div>;
};

export default Page;

Output

Screenshot_20240503_172232

Server Component

Reading the current URL from a Server Component is not supported. This design is intentional to support layout state being preserved across page navigations. As server component renders on the server side, there is no window object from which we can get URL pathname. Other hacky solutions like [Tex]next/headers[/Tex] don’t work in Next 14 and is not recommended to use as it causes severe performance issues. If your logic need pathname then consider it moving to client component.

Conclusion

In this article we have learned how to setup what are URL pathname, how to setup Next.js project, how to get pathname in pages router and app router.

Reffered: https://www.geeksforgeeks.org

ReactJS

Related
Difference between _app.js and _document.js files in Next.js
How to Get query params using Server component in Next.js ?
How to Fix React useEffect running twice in React 18 ?
How To Detect Production or Dev Environment in NextJs?
How to Handle Different Environments in a Next.js?

Type:	Geek
Category:	Coding
Sub Category:	Tutorial
Uploaded by:	Admin
Views:	17