Next.js Discord

Discord Forum

Dynamic Layout depending of url params in App Router?

Answered
Giant Angora posted this in #help-forum
Open in Discord
Giant AngoraOP
Hi guys, any idea of how i could get current url params from a layout.tsx in Nextjs App Router? For example:

tsx 
/au/en

export default Layout(){
 const country = 'au';
 const lang = 'en';

return ...
}
Answered by Ray
export default function ShopLayout({
  children,
  params,
}: {
  children: React.ReactNode
  params: {
    tag: string
    item: string
  }
}) {
  // URL -> /shop/shoes/nike-air-max-97
  // `params` -> { tag: 'shoes', item: 'nike-air-max-97' }
  return <section>{children}</section>
}
View full answer

4 Replies

Ray
export default function ShopLayout({
  children,
  params,
}: {
  children: React.ReactNode
  params: {
    tag: string
    item: string
  }
}) {
  // URL -> /shop/shoes/nike-air-max-97
  // `params` -> { tag: 'shoes', item: 'nike-air-max-97' }
  return <section>{children}</section>
}
Answer
the layout receive a params object as props
Original message was deleted
awareness481
This isn't behavior we want to see in the server