How do I access the page slug in the layout file in Next.js (with the app folder)?

Question

Using the new app folder in a nested layout, I have a header. Let's assume the path for all the pages in that path are www.mysite.com/some-slug. I have a signup button in my header (which is part of the layout), and I want it to send the user to www.mysite.com/some-slug/signup but I can't understand how to access the slug. I see the new useRouter doesn't have a query anymore, and I don't have access to the page's context as I am one level above the page.

I use Next.js version 13.

Answer 1

As you can read on the doc, a Layout in a dynamic segment gets past a second parameter called params, which contains the slugs. For example:

// app/[slug]/Layout.js 👈🏽

import Link from "next/link";

export default function Layout({ children, params }) {
  return (
    <main>
      <Link href={`/${params.slug}/signup`}>Signup</Link>
      {children}
    </main>
  );
}