How to do dynamic routes with nextjs 13?

Question

How do we do dynamic routing with layouts in nextjs 13?

I have a directory in the new next pages app in which im trying to do dynamic routing: app/dashboard/[id].jsx, however it does not work with the dashboard layout.

How do I do it? Normal pages work like app/dashboard/pages.jsx but how do we do dynamic routes in which i can also get the id?

Answer 1

https://nextjs.org/docs/app/api-reference/file-conventions/page

So: app/dashboard/[id]/page.jsx

Your Page function can take a params argument:

export default function Page({ params, searchParams }) {
    return <div>ID: {params.id}</div>
}