nextjs-current-url
TypeScript icon, indicating that this package has built-in type declarations

1.0.3 • Public • Published

nextjs-current-url

Quickly get the current URL or route in Next.js client & server environments

Usage

Next.js client component

nextjs-current-url has a useUrl hook that quickly gives you the current URL in a browser-rendered component. It returns a URL object. URL let's you easily access specific parts of the URL. useUrl works in both pages and app router.

Example:

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

export default function Home() {
  // 👇 useUrl() returns `null` until hydration, so plan for that with `??`
  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>
    </>
  );
}

Result:

getServerSideProps()

To use nextjs-current-url in getServerSideProps, call the getUrl function, passing the context object's req property.

Example:

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

Result:

Next.js middleware

next-js-current-url also works in Next.js middleware files. Call getUrl and pass the NextRequest object in the middleware function.

src/middleware.ts

import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';
import { getUrl } from 'nextjs-current-url/server';
import { getSession } from '@/lib/session';

export async function middleware(request: NextRequest) {
  const { href, orgin } = getUrl({ req: request });
  const session = await getSession(request);
  if (!href.startsWith('/signin') && !session.user) {
    const signinUrl = new URL('/signin', origin);
    signinUrl.searchParams.set('continue', href);
    return NextResponse.redirect(signinUrl);
  }
}

export const config = {
  matcher: '/app/:path*',
};

Package Sidebar

Install

npm i nextjs-current-url

Weekly Downloads

1,515

Version

1.0.3

License

MIT

Unpacked Size

6.85 kB

Total Files

6

Last publish

Collaborators

  • tariibaba