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>
</>
);
}

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>
);
}

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.

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>
</>
);
}


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>
</>
);
}

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>
</>
);
}

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, likehttps:
ormailto:
. 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>
</>
);
}

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 fromnext/navigation
is the way to go. But remember, these components are server-side by default. - To find out the current route in
getServerSideProps
, just usereq.url
from the context. It’s as simple as that! - To get the current URL in
getServerSideProps
, use thegetUrl
function fromnextjs-current-url
library. Just pass in thecontext.req
, and you’re good to go! - Want to get the full URL?
useUrl
hook fromnextjs-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.
