Jump Start with Next.js Routing
1 min read
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.
The router will automatically route files named index to the root of the directory.
pages/index.js → / pages/blog/index.js → /blog
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)