⚔️ Code Conqueror

🐣 Nested routes in Next.js

Nov 20, 2019

Defining routes in Next.js, including nested routes, is done primarily through the file structure in the pages directory.

For example if you want your site to point to /about you add a file

where the default export is a component that handles the request.

Next recently introduced parameterized routing support through the file structure. If you want to, for example, have a URL like

direct to a profile page for fred then you add a page
and you can then parse the username out of the request query . On the client you can get the query from the
object (imperatively, through
hook, or the
HOC) and on the server you can get it from the
object. Then you can serve the page appropriate to the ‘username’ provided.

We'll review a couple more ways that you can define nested / dynamic routes in Next.js

Nesting routes

Nesting routes is just done simply by having deeper files in the

directory for example:

will map to the route
etc. You can build up your full application routing in this way.

Custom routes - option 1, custom server

If for some reason you need more routing flexibility than the pages directory gives you, for example if some particular parameter values render different pages in a parameterized route. You can create a custom server that handles these routes.

Follow the Nextjs documentation for creating such a route. The drawback to doing this is that your Next application becomes a monolith and is no longer able to be deployed as independent server less functions. You can also use the next-routes module to help with setting up the custom server routes.

This can be useful if you are integration Next.js into a larger express based application for instance though.

Option 2 - Use route configuration from your serverless provider

Another way to customize routes is through the route configuration interfaces from your server less provider. This has the advantage of keeping the sleeveless benefits but allowing for somewhat more flexibility than the pages directory provides.

Take Zeits Now for example. You can configure routes like:

"routes": [{ "src": "/about", "dest": "/about-route.js" }]

Zeit Now also has support for an

directory in the root which acts ~ the same as the Next.js
directory. So you can create api routes for non-javascript langauges as well through a similar routing technique.

Recommended routing method

We recommend keeping your Next.js route configuration using only the pages directory. It seems like this is the direction the Next team is taking and most best practice routes can be configured through that method.

For example if you did want

for your new user path you can configure
. Next is smart enough to give priority to the static paths in the same directory first before the dynamic ones (although this is not our recommended way to build a new object route).

Next even will soon have some support for redirects / rewrites.