How to Get URL pathname in Next.js?

Next.js is a React framework used to build sophisticated full-stack web applications. Since the introduction of the App router, Next.js’s popularity has skyrocketed, making it the most widely used React.js framework. When developing applications, we frequently require URL pathnames to enable different features for specific users.

In this article, we will explore how to obtain URL pathnames in Next.js applications.

Prerequisites:

• React.js
• Basic understanding of Next.js

What is an URL pathname?

According to MDN web docs “The pathname property of the URL interface represents a location in a hierarchical structure. It is a string constructed from a list of path segments, each of which is prefixed by a / character. If the URL has no path segments, the value of its pathname property will be the empty string.”

For example, [Tex]geeksforgeeks.org/[/Tex] has one path segment which is a empty string as there is nothing after /.

The final segment of a pathname is referred as slug. For example, [Tex]xyz.com/post/3[/Tex], here the pathname is [Tex]/post/3[/Tex] and [Tex]/3[/Tex] is the slug.

Steps to Create NextJS Project

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

Navigate to desired directory and type the following command in terminal

pnpm create next-app@latest

Project choices

This article will cover methods to get pathname in both pages & app router.

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:

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:

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:

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:

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.