← All posts

Next.js / Handle Optional Subpath

In Next.js, you can define a dynamic route^◹ by creating a file at /pages/post/[id].tsx. And this will catch all URLs like /post/foo, /post/bar,…

But if you want to catch URLs like /post, you will have to create another file at /pages/post/index.tsx.

One other way to catch all URLs including /post/<anything> and /post, you can create a file like /pages/post/[...id].tsx.

And to catch all URLs with multiple levels like /post, /post/<anything>, /post/<anything>/<any>/<level>/..., create a file like /pages/post/[[...id]].tsx.