CODEWITHSUNDEEP
javascriptnext.jsnext.js13nextjs-dynamic-routing
jacob
jacob

Reputation: 45

Passing props to Layout for dynamic routes (App Router) in Next.js 13

I want to pass props to Layout for some dynamic routes. This is the project structure:

/app
-/(site)
--/layout.tsx
--/page.tsx
--/[slug]/page.tsx
--/[slug]/layout.tsx

in the site layout:

export default async function IndexRoute({
  children
}: {
  children: React.ReactNode
}) {
  const settings = await getSettings()

  const layout = (
    <html  lang='en'>
      <body>
        <div className='flex min-h-screen flex-col'>
          <a className='sr-only' href='#mainContent'>
            Skip to content
          </a>
          <Suspense>
            <Masthead />
          </Suspense>
          <main className='flex flex-1 flex-col ' id='mainContent'>
            <Suspense>{children}</Suspense>
          </main>
          <Suspense>
            <Foundation menus={settings.menus.footer} />
          </Suspense>
        </div>
      </body>
    </html>
  )
  return layout
}

Apparently this layout will consider the [slug] layout as a nested layout. My goal here is to create a layout for the [slug] routes so I can pass props to that layout. How can I solve this?

Upvotes: 4

Views: 3494

Answers (2)

David Thomas
David Thomas

Reputation: 4396

Good to add, for routes with dynamic parameters - the dynamic route parameters object from the root segment is passed to the layout.

For example:

// app/shop/[tag]/[item]/layout.tsx

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>
}

https://nextjs.org/docs/app/api-reference/file-conventions/layout#params-optional

So it's possible to render a layout conditionally based on the dynamic route parameter values.

Upvotes: 0

Yilmaz
Yilmaz

Reputation: 49661

there is no communication between a page and a layout.

page.tsx is rendered as the children component of the layout. From here

Unlike Pages, Layout components do not receive the searchParams prop. This is because a shared layout is not re-rendered during navigation which could lead to stale searchParams between navigations.

That is because a layout file serves as a template or structural framework that defines the overall structure, design, and arrangement of elements for multiple pages within a website or web application. It does not rerender so user always see the layout components on the browser even when they navigate to another page.

Upvotes: 4

Related Questions