Is there any way to 'use client' on layout and still export metadata?

Answered

Yann posted this in #help-forum

2024-02-08T13:53:28.000Z

I want to change navbar when the website resides on home, which works perfectly fine. The problem is that I'm completing that through 'use client' and pathname. as illustrated in the code and when you try to export the metadata from a 'use client' file you're met with an error. Is there any possible to work around that?

Answered by riský

Also make your layout file import a client file of nav that is client to make use of usePathname but not have the layout client

View full answer

6 Replies

Common House-Martin

2024-02-08T14:03:43.000Z

This component doesnt need to be a client component, you could just get the url like:

 import { headers } from "next/headers";

 const heads = headers()

 const pathname = heads.get('next-url')

also i would recommend using layouts for this and make use of the app folder features

@Yann I want to change navbar when the website resides on home, which works perfectly fine. The problem is that I'm completing that through 'use client' and pathname. as illustrated in the code and when you try to export the metadata from a 'use client' file you're met with an error. Is there any possible to work around that?

riský

2024-02-08T14:12:20.000Z

https://nextjs-faq.com/metadata-client-components

riský

2024-02-08T14:13:29.000Z

Also make your layout file import a client file of nav that is client to make use of usePathname but not have the layout client

Answer

riský

2024-02-08T14:15:58.000Z

Another method you could use here is route groups (it's slightly more advanced but would be better heare if you just want to have different on root)

YannOP

2024-02-08T16:30:21.000Z

Thank you very much