Routing

Next.js has a file-system-based router built on the concept of pages.

When you add a file to the pages directory, next.js make it available as a route.

The files inside the pages directory can be used to define the most common route patterns.

Index routes

The router will automatically route files named index to the root of the directory.

pages/index.js → / pages/blog/index.js → /blog

Nested routes

Nested files are supported by a router. If you create a nested folder structure, files will automatically be routed in the same way still.

pages/blog/first-post.js → /blog/first-post pages/dashboard/settings/username.js → /dashboard/settings/username

Dynamic route segments

For matching a dynamic segment, you can use the bracket syntax. This allows you to match named parameters.

pages/blog/[slug].js → /blog/:slug (/blog/hello-world) pages/[username]/settings.js → /:username/settings (/moo/settings) pages/post/[...all].js → /post/* (/post/2020/id/producttitle)