How to Quickly Get the Current Route in Next.js

We can get the current route in a Next.js component with the useRouter hook:

import Head from 'next/head';
import { useRouter } from 'next/router';

export default function Home() {
  const { pathname } = useRouter();

  return (
    <>
      <Head>
        <title>Next.js - Coding Beauty</title>
        <meta name="description" content="Next.js Tutorials by Coding Beauty" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <main>
        Welcome to Coding Beauty 😄
        <br />
        <br />
        Pathname: <b>{pathname}</b>
        <br />
        URL: <b>{currentUrl}</b>  
      </main>
    </>
  );
}

Displaying the current route on a Next.js page

Follow @codingbeautydev

Get current route in Next.js app router component

To get the current route in a Next.js app router component, you can use the usePathname hook from next/navigation.

'use client';
import React from 'react';
import { Metadata } from 'next';
import { usePathname } from 'next/navigation';

export const metadata: Metadata = {
  title: 'Next.js - Coding Beauty',
  description: 'Next.js Tutorials by Coding Beauty',
};

export default function Page() {
  const pathname = usePathname();

  return (
    <main>
      Welcome to Coding Beauty 😄
      <br />
      <br />
      Route: <b>{pathname}</b>
    </main>
  );
}

Displaying the current route in a Next.js app router component

Next.js app router: We need `'use client'`

Notice the 'use client' statement at the top.

It’s there because all components in the new app directory are server components by default.

This means we can’t access client-side specific APIs.

We can’t do anything interactive with useEffect or other hooks.

If we try, we’ll get an error.

Because it’s a server environment.

We get an error if we try to use hooks in a server component

Get current route in Next.js `getServerSideProps`

To get the current route in getServerSideProps, use req.url from the context argument.

import { NextPageContext } from 'next';
import Head from 'next/head';

export function getServerSideProps(context: NextPageContext) {
  const route = context.req!.url;
  console.log(`The route is: ${route}`);

  return {
    props: {
      route,
    },
  };
}

export default function Home({ route }: { route: string }) {
  return (
    <>
      <Head>
        <title>Next.js - Coding Beauty</title>
        <meta name="description" content="Generated by create next app" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="icon" href="/favicon.png" />
      </Head>
      <main>
        Welcome to Coding Beauty 😃
        <br />
        Route: <b>{route}</b>
      </main>
    </>
  );
}

The current route printed in the console

Get full URL in Next.js `getServerSideProps`

To get the current URL in getServerSideProps of a Next.js page, use the getUrl function from the nextjs-current-url library.

import { NextPageContext } from 'next';
import Head from 'next/head';
import { getUrl } from 'nextjs-current-url/server';

export function getServerSideProps(context: NextPageContext) {
  const url = getUrl({ req: context.req });
  return {
    props: {
      url: url.href,
    },
  };
}

export default function Home({ url }: { url: string }) {
  const urlObj = new URL(url);
  const { pathname } = urlObj;

  return (
    <>
      <Head>
        <title>Next.js - Coding Beauty</title>
        <meta name="description" content="Generated by create next app" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="icon" href="/favicon.png" />
      </Head>
      <main>
        Welcome to Coding Beauty 😃
        <br />
        <br />
        URL: <b>{url}</b>
        <br />
        Route: <b>{pathname}</b>
      </main>
    </>
  );
}

The current URL is displayed on the Next.js page from getServerSideProps()

Get full URL in Next.js component

To get the current URL in a Next.js component, you can use the useUrl hook from the nextjs-current-url library.

With pages directory:

import { useUrl } from 'nextjs-current-url';
import Head from 'next/head';

export default function Home() {
  const { href: currentUrl, pathname } = useUrl() ?? {};

  return (
    <>
      <Head>
        <title>Next.js - Coding Beauty</title>
        <meta name="description" content="Next.js Tutorials by Coding Beauty" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="icon" href="/favicon.png" />
      </Head>
      <main>
        Welcome to Coding Beauty 😄
        <br />
        <br />
        Route: <b>{pathname}</b>
        URL: <b>{currentUrl}</b>
        <br />
      </main>
    </>
  );
}

Displaying the full URL on a React component

useUrl() returns a URL object that gives us more info on the current URL.

Here are some of them:

search: the URL’s query parameters. Includes the ?

hash: the fragment identifier, the part after the #.
href: the complete URL, including the protocol, hostname, port number, path, query parameters, and fragment identifier.
protocol: URL’s protocol scheme, like https: or mailto:. Doesn’t include the //.

hostname: the URL’s domain name without the port number.
pathname: the URL’s path and filename without the query and fragment identifier.

import { NextPageContext } from 'next';
import Head from 'next/head';
import { useUrl } from 'nextjs-current-url';

export default function Home() {
  const { pathname, href, protocol, hostname, search, hash } = useUrl() ?? {};

  return (
    <>
      <Head>
        <title>Next.js - Coding Beauty</title>
        <meta name="description" content="Generated by create next app" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="icon" href="/favicon.png" />
      </Head>
      <main>
        Welcome to Coding Beauty 😃
        <br />
        <br />
        URL: <b>{href}</b>
        <br />
        Pathname: <b>{pathname}</b>
        <br />
        Protocol: <b>{protocol}</b>
        <br />
        Hostname: <b>{hostname}</b>
        <br />
        Search: <b>{search}</b>
        <br />
        Hash: <b>{hash}</b>
      </main>
    </>
  );
}

Displaying various URL properties on the page

Key takeaways

You can use useRouter hook in Next.js to know the current route. It’s like your navigation compass!

For getting the current route in a Next.js app router component, usePathname hook from next/navigation is the way to go. But remember, these components are server-side by default.
To find out the current route in getServerSideProps, just use req.url from the context. It’s as simple as that!
To get the current URL in getServerSideProps, use the getUrl function from nextjs-current-url library. Just pass in the context.req, and you’re good to go!

Want to get the full URL? useUrl hook from nextjs-current-url library is your friend. It tells you everything about the URL.

11 Amazing New JavaScript Features in ES13

This guide will bring you up to speed with all the latest features added in ECMAScript 13. These powerful new features will modernize your JavaScript with shorter and more expressive code.

Get current route in Next.js app router component

Next.js app router: We need 'use client'

Get current route in Next.js getServerSideProps

Get full URL in Next.js getServerSideProps