Is there a way to grab the current URL in a nextjs 13 Layout component

[luis-garcia17]

Hello. I'm stuck on grabbing the current URL in nextjs 13 Layout component. I want to do it using the nextjs useRouter function, my component without useRouter looks like this

src/app/layout.tsx

I'm not able to use the useRouter function in any of its forms (next/router or next/navigation) they can't be used because the Layout is a server component, if I change it to a client component then the metadata part won't work because of this error:

You are attempting to export "metadata" from a component marked with "use client", which is disallowed. Either remove the export, or the "use client" directive. Read more: https://nextjs.org/docs/getting-started/react-essentials#the-use-client-directive

Is there some workaround to this? I preferably don't want to use the previous version pages

nextjs version: 13.4.7

[raferdev]

There are some approches but i think you can use params that came with the layout function, or use middleware file to send more information to your layout function, like geo locations and more. Like serverside function you have all http info needed, but if you really need use navigate, its better you use 'use client' on the page function. Or you can use the metadata file generation, in the last case.
some links:
https://nextjs.org/docs/app/building-your-application/optimizing/metadata#dynamic-metadata
https://nextjs.org/docs/app/api-reference/file-conventions/layout#params-optional
https://nextjs.org/docs/app/building-your-application/routing/middleware

[arvi0731]

Create a middleware.ts (or .js) in the root of your project. (https://nextjs.org/docs/app/building-your-application/routing/middleware)

import { NextResponse } from 'next/server';

export function middleware(request: Request) {
  const requestHeaders = new Headers(request.headers);
  requestHeaders.set('x-url', request.url);

  return NextResponse.next({
    request: {
      headers: requestHeaders
    }
  });
}

then use headers in your layout or page. (https://nextjs.org/docs/app/api-reference/functions/headers#headers)

const requestUrl = headers().get('x-url')

If this helps you, please also upvote my answer on Stack Overflow. I'm trying to gain reputation. Thanks
https://stackoverflow.com/questions/77100792/next-js-13-current-url/77811578#77811578

[MahmoudKafrawy]

that will work when first render only , what about navigate in app like sidebar links

[ivan-kleshnin]

Also not clear how to pass that new object in await next(req, event) when middleware factory is used. req is a class instance and you can't replace it with a custom object expect everything to work fine.

[JKarlavige]

Just a warning on this, using next/headers in a component will convert the entire route to dynamic. Just had to undo some work because of this and trying to find an alternative solution. See documentation here.

[hunterbevis]

If you change it to a client component, you could use usePathname(). I was just testing it out and its working for me. Give this a shot real quick and see if this fits your needs. (edit. code formatting)
https://nextjs.org/docs/app/api-reference/functions/use-pathname

'use client'
 
import { usePathname } from 'next/navigation'
 
export default function ExampleClientComponent() {
  const pathname = usePathname()
  return <p>Current pathname: {pathname}</p>
}

[Yogeshthangm]

Worked thanks

[SH20RAJ]

Worked ❤️ Thanks

[shahradelahi]

Hey there!

To access the URL from server actions and components in your Next.js project, you can use the next-extra package.

First, install the package by running the following command:

npm install next-extra

Once installed, you can use the package as shown below:

import { headers } from 'next/headers';
import { pathname } from 'next-extra/pathname';

export default async function Layout({ children }: Readonly<{ children: React.ReactNode }>) {
  const base = `${headers().get('x-forwarded-proto')}://${headers().get('host')}`;
  const fullUrl = new URL(pathname(), base); // e.g., http://localhost:3000/some/path?a=1&b=2

  console.log(fullUrl);

  return children;
}

I hope this helps!

[jheng-jie]

This is the answer I've been searching for! It solves the issue of i18n with the router where I couldn't determine the language in the root layout. Next.js should have this built-in, but it's surprising that we need a plugin to handle it. Thanks to this expert!

[basinhr]

This works like a charm! I'm shocked that next.js doesn't have it built in. this is a shame!

[klincoder]

It doesn't work on route change.

[jheng-jie]

It doesn't work on route change.

The layout is cached by the app router itself, which is different from the page router, and is unrelated to this package.

[leerob]

Please see #43704 (comment) for a detailed answer.