"use client" in layout of nextjs 13 app directory breaks the purpose of metadata data

[Junnygram]

Link to the code that reproduces this issue or a replay of the bug

https://github.com/Junnygram/shield/blob/main/app/layout.tsx

To Reproduce

I did some conditional rendering in my next13 app , so i used useState, i cant use the useState hook without adding 'use client' above my code . Adding use client returns error for the meta data in the layout file. Using useState turns the code into a client side component and metadata is not allowed in the client side component.

Current vs. Expected behavior

I did some conditional rendering in my next13 app , so i used useState, i cant use the useState hook without adding 'use client' above my code . Adding use client returns error for the meta data in the layout file. Using useState turns the code into a client side component and metadata is not allowed in the client side component.

Verify canary release

• [X] I verified that the issue exists in the latest Next.js canary release

Provide environment information

"next": "13.4.19",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "typescript": "5.2.2",

Which area(s) are affected? (Select all that apply)

Metadata (metadata, generateMetadata, next/head)

Additional context

I did some conditional rendering in my next13 app , so i used useState, i cant use the useState hook without adding 'use client' above my code . Adding use client returns error for the meta data in the layout file. Using useState turns the code into a client side component and metadata is not allowed in the client side component.

[godfrednanaowusu]

I smiled when i saw your issue, as I was in the same situation just some days ago,

There are some few steps that helped me,

1. The only way i could make mine work was to remove the 'use client' from the root layout.tsx and put it in the Providers file, that fixes the issue instantly, but unfortunately you need to check the pathname against some pages, ok, that leads to the next step.

2. you have to learn to use Route Groups https://nextjs.org/docs/app/building-your-application/routing/route-groups this would allow you have different layouts for different pages, especially if you need a specific nav in some of the pages, and not some. You can also learn the templates too, thats also fantastic.

Summary:

1. remove 'use client' from the root layout and put it in the providers
2. group your routes and have specific layouts there (to accomodate specific navs).

Good Luck, and dont forget to let me know if it worked for you.

[naringst]

Hello, I recently encountered a similar issue and resolved it by following the approach suggested by @godfrednanaowusu.

In my case, the Header component needed to be conditionally rendered based on the pathname, which required the use of the usePathname hook, available only in client components. Therefore, there was an issue with applying metadata in layout.tsx.

The detailed process I followed to resolve this issue was as follows:

1. To transform layout.tsx into a server component, I removed 'use client'.
2. Then, I separated the code exclusive to client components, creating new client components with 'use client'(or .client.tsx) and moved codes like usePathname, useRef, and other client-exclusive codes from layout.tsx to external client components.

These modifications not only allowed the conversion of layout.tsx into a server component but also enabled the configuration of metadata settings.

If needed, please refer to my pull request link for more information! I hope this helps! :)