How do I pass className prop to app router "layout" component?
Answered
African Slender-snouted Crocodil… posted this in #help-forum
Original message was deleted.
Answered by fuma
Correct, you can no longer pass props to layout due to the design constraints of Next.js (it comes with performance benefits)
As a workaround, Next.js recommends using Route Group, or
1. [Route Group](https://nextjs.org/docs/app/building-your-application/routing/route-groups)
You can use route groups to have unique layout for different pages. (e.g. you want to render navbar only for routes under
2.
Create a client component and use
Since you can put cilent components in a server component, it is allowed.
As a workaround, Next.js recommends using Route Group, or
usePathname in a client component:1. [Route Group](https://nextjs.org/docs/app/building-your-application/routing/route-groups)
You can use route groups to have unique layout for different pages. (e.g. you want to render navbar only for routes under
/(home)).2.
usePathnameCreate a client component and use
usePathname to get and render different class names based on the current pathname.Since you can put cilent components in a server component, it is allowed.
3 Replies
Correct, you can no longer pass props to layout due to the design constraints of Next.js (it comes with performance benefits)
As a workaround, Next.js recommends using Route Group, or
1. [Route Group](https://nextjs.org/docs/app/building-your-application/routing/route-groups)
You can use route groups to have unique layout for different pages. (e.g. you want to render navbar only for routes under
2.
Create a client component and use
Since you can put cilent components in a server component, it is allowed.
As a workaround, Next.js recommends using Route Group, or
usePathname in a client component:1. [Route Group](https://nextjs.org/docs/app/building-your-application/routing/route-groups)
You can use route groups to have unique layout for different pages. (e.g. you want to render navbar only for routes under
/(home)).2.
usePathnameCreate a client component and use
usePathname to get and render different class names based on the current pathname.Since you can put cilent components in a server component, it is allowed.
Answer
For example, if you want to render different footer for individual page, turn your footer component into client component and use the hook instead
It’s as simple as
And import it from your layout. Some recommended resources: https://nextjs.org/docs/app/building-your-application/rendering/composition-patterns
“use clientâ€
export function Footer() { … }And import it from your layout. Some recommended resources: https://nextjs.org/docs/app/building-your-application/rendering/composition-patterns