how to get params in layout

[wary needle]

Hi @mint jungle. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

To get params in a layout using the Next.js App Router, you can access them through the params prop. However, there are some important considerations to keep in mind:

1. The params prop in layouts is now a Promise in Next.js 15 and later versions.

2. You need to use async/await or React's use function to access the values.

Here's how you can access params in a layout:

export default async function Layout({
  children,
  params,
}: {
  children: React.ReactNode
  params: Promise<{ slug: string }>
}) {
  const { slug } = await params
  // Use the slug value here
}

If you're using a synchronous layout, you can use the use function from React:

import { use } from 'react'

export default function Layout(props: {
  children: React.ReactNode
  params: Promise<{ slug: string }>
}) {
  const params = use(props.params)
  const slug = params.slug
  // Use the slug value here
}

It's important to note that layouts only have access to the params of the route segments above them, not below.

Next.js Documentation provides more details on this topic.

Also, keep in mind that unlike pages, layouts 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.

Next.js Documentation explains this limitation in detail.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: