How to Quickly Get the Current URL in Next.js

To get the current URL in a Next.js component, use the useUrl hook from the nextjs-current-url package:

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 />
        URL: <b>{currentUrl}</b>
        <br />
        pathname: <b>{pathname}</b>
      </main>
    </>
  );
}

The current URL is displayed on the Next.js page

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

Follow @codingbeautydev

Get current URL with `useState` and `window.location.href`

We can also get the current URL in a client component using useState and window.location.href.

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

export default function Home() {
  const [currentUrl, setCurrentUrl] = useState<string | null>(null);
  const { pathname } = useRouter();

  useEffect(() => {
    setCurrentUrl(window.location.href);
  }, []);

  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 />
        URL: <b>{currentUrl}</b>
        <br />
        pathname: <b>{pathname}</b>
      </main>
    </>
  );
}

The window.location.href property returns a string containing the entire page URL.

We use the useState hook to create state that’ll we store in the current URL.

We set the state in the useEffect hook.

`window.location`

window.location has other properties that tell you more about the URL. Like:

pathname: the path of the URL after the domain name and any optional port number. Query and fragment identifier not included.

protocol: URL‘s protocol scheme, like https: or mailto:. Doesn’t include the //.
hostname: the URL‘s domain name without the port number.

Here’s a demo where we use some of these properties:

import { getUrl } from '@/lib/utils/get-url';
import { NextPageContext } from 'next';
import Head from 'next/head';
import { useEffect, useState } from 'react';

export function getServerSideProps(context: NextPageContext) {
  return {
    props: {
      currentUrl: getUrl({ req: context.req! })?.href,
    },
  };
}

export default function Home() {
  const [myLocation, setMyLocation] = useState<Location | null>(null);

  useEffect(() => {
    setMyLocation(window.location);
  });

  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>
        You are currently accessing <b>{myLocation?.href}</b> 😃
        <br />
        Pathname: <b>{myLocation?.pathname}</b>
        <br />
        Protocol: <b>{myLocation?.protocol}</b>
        <br />
        Hostname: <b>{myLocation?.hostname}</b>
      </main>
    </>
  );
}

Displaying various URL segments on the page

We need `useEffect` to get the current URL

In Next.js, pages render on both the server and client.

So when the server renders the page, there’s no window object available!

Just like in normal Node.js right? Yes – the server environment.

So you’ll get a “window is not defined” error if you try to use window before hydration:

"window is not defined" error in Next.js page

That’s why we use useEffect – to wait till mounting/hydration is done.

Hope that’s clear?

Note: Hydration is when a server-generated web page gets extra client-side features added by the user’s web browser. Features like event listeners, client-side routing, etc.

Get current URL in Next.js app router component

To get the current url in a Next.js app router component, we can also use the useUrl hook from the nextjs-current-url library.

'use client';
import React from 'react';
import { useUrl } from 'nextjs-current-url';
import { Metadata } from 'next';

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

export default function Page() {
  const { pathname, href } = useUrl() ?? {};

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

The current URL is displayed on the 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, like useUrl.

If we try, we’ll get an error.

Because it’s a server environment.

Get current 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()

getUrl uses info from context.req object to form the complete current URL.

The URL is not serializable, so we pass href, which is a string.

In the client, we create a URL object again with URL().

We get the pathname with the pathname property.

Let’s check out some more properties of URL:

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, href, protocol, hostname, search, hash } = 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>{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>
    </>
  );
}

Here’s what these properties do:

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.
search: the URL’s query parameters. Includes the ?
hash: the fragment identifier, the part after the #.

Various properties of the URL are displayed on the page.

Note: It’s not possible to get the fragment in getServerSideProps because the browser never sends the part after the # to the server. That’s why there’s no hash here. We’d have to get the current URL in the client-side to access the fragment identifier.

Key takeaways

To get the current URL in a Next.js component, we can use useUrl hook from the nextjs-current-url package.
Or useState and window.location.href in a client component.
The window.location has properties like protocol, hostname, and pathname that give more information about the URL.

In Next.js pages, use useEffect to wait until mounting/hydration is done to access client-side specific APIs.
All components in the new app directory are server components by default.
To access client-side-specific APIs, set the 'use client' statement at the top.
To get the current URL in Next.js getServerSideProps, use getUrl() from the nextjs-current-url package, i.e., getUrl({ req: context.req }).
The URL is not serializable, so we pass href, which is a string.

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 URL with useState and window.location.href

window.location

We need useEffect to get the current URL

Get current URL in Next.js app router component

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

Get current URL in Next.js getServerSideProps