https://github.com/codingbeautydev/nextjs-current-url

JavaScript library to easily get the current URL or route in Next.js
https://github.com/codingbeautydev/nextjs-current-url

javascript next next-current-url nextjs nextjs-current-url nextjs13 npm typescript url utility

Last synced: about 1 month ago
JSON representation

JavaScript library to easily get the current URL or route in Next.js

• Host: GitHub
• URL: https://github.com/codingbeautydev/nextjs-current-url
• Owner: codingbeautydev
• Created: 2023-06-25T19:59:06.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2023-09-16T21:46:25.000Z (over 1 year ago)
• Last Synced: 2024-11-16T03:29:48.579Z (about 2 months ago)
• Topics: javascript, next, next-current-url, nextjs, nextjs-current-url, nextjs13, npm, typescript, url, utility
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/nextjs-current-url
• Size: 369 KB
• Stars: 5
• Watchers: 1
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# 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`](https://developer.mozilla.org/en-US/docs/Web/API/URL) object.

`URL` let's you easily access specific parts of the URL.

`useUrl` works in both pages and app router.

Example:

```ts

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 (

    <>

      

        Next.js - Coding Beauty

        

        

        

      

      

        Welcome to Coding Beauty 😄

        


        


        URL: {currentUrl}

        


        pathname: {pathname}

      

    >

  );

}

```

Result:

![](media/clientcomponent.webp)

### getServerSideProps()

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

Example:

```ts

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 (

    <>

      

        Next.js - Coding Beauty

        

        

        

      

      

        Welcome to Coding Beauty 😃

        


        


        URL: {url}

        


        Route: {pathname}

      

    >

  );

}

```

Result:

![](media/getserversideprops.webp)

### 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`

```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*',

};

```

![](media/middleware.gif)