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:

src/pages/index.tsx
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

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.

src/app/page.tsx
'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.

src/pages/amazing-url.tsx
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
The current route displayed on the page

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.

src/pages/index.tsx
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:

src/pages/index.tsx
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.
src/pages/amazing-url.tsx
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.

11 Amazing New JavaScript Features in ES13

Sign up and receive a free copy immediately.


Leave a Comment

Your email address will not be published. Required fields are marked *