Skip to content

NextJS:layout.js

A layout is UI that is shared between routes.

Example

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

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

See also

Favorite site