Possible to share same layout across different dynamic paths and access a common param in layout?

[cbovis]

We have a layout requirement that I don't think NextJS app router can currently fulfill properly.

Take this example of three routes:

• /project/{slug}
• /exchange/{slug}
• /organization/{slug}

We'd like them to use a common layout that has access to the slug param. When navigating between these routes we'd like to maintain state but re-render based on changes to the slug.

It seems like currently this isn't possible. They can be placed in a route group however the layout for that route group doesn't have access to the slug parameter. Specifically we'd like to ensure access to the parameter for SSR.

Am I missing something or is this a current limitation?

[Juneezee]

however the layout for that route group doesn't have access to the slug parameter.

Unfortunately, this is one of the limitations of the current Next.js.

There are a few options you could try:

1. usePathname() Pathname from layout.ts at new app structure (nextjs 13) #43657 (comment). This requires your layout.tsx to be a client component

2. Change your routes to

   • [slug]/project
   • [slug]/exchange
   • [slug]/organization

   So that you can have a layout.tsx at the root of [slug] folder, See https://nextjs.org/docs/app/api-reference/file-conventions/layout#params-optional