⚔️ 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

pages/about.js
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

/users/fred
direct to a profile page for fred then you add a page
/pages/[username].js
and you can then parse the username out of the request query . On the client you can get the query from the
Router.query
object (imperatively, through
useRouter
hook, or the
withRouter
HOC) and on the server you can get it from the
req.query
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

pages/
directory for example:

pages/users/profile/[username].js
will map to the route
/users/profile/fred
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

api
directory in the root which acts ~ the same as the Next.js
pages/api
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

/users/new
for your new user path you can configure
/users/new.js
and
/users/[username].js
. 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.