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

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://geeksforgeeks.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

Folder structure

Get URL pathname in Pages router

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

Example 1: Getting the pathname

//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

Example 2: Getting slug of a dynamic route.

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

//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

Example 3: Getting the whole pathname of a dynamic Router

//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

Get URL pathname in App router

Client Component

In client component usePathname() hook is used to get pathname.

"use client";

import { usePathname } from "next/navigation";

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

export default Page;

Output

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 next/headers 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.

sarthakroy107

Follow

Improve

Article Tags :

• Web Technologies
• ReactJS
• Next.js