Published on

Next.js Ultimate Routing Guide

Thumbnail

One of the great features of Next.js is having a file-based routing system.

If you want to create new routes for your web app, you can simply create new files inside your pages folder and get done with it.

Next.js gives you several options for creating a route. As it is easy to forget what each option does, I created this guide to help you through.

Here are the routes that we will walk through:

  1. One Level Deep Static Routes

/pages/blogs.js/blogs

/pages/blogs/index.js/blogs

  1. N Level Deep Static Routes

/pages/blogs/favorites.js/blogs/favorites

/pages/blogs/favorites/index.js/blogs/favorites

  1. One Level Deep Dynamic Routes

/pages/blogs/[postId].js/blogs/a, /blogs/b, /blogs/c

  1. N Level Deep Dynamic Routes

/pages/blogs/[postId]/[commentId].js/blogs/a/b

  1. Catch All Routes

/pages/blogs/[...post].js/blogs/a, /blogs/a/b, /blogs/a/b/c/d/...

  1. Optional Catch All Routes

/pages/blogs/[[...post]].js/blogs/, /blogs/a, /blogs/a/b, /blogs/a/b/c/d/...

We will get through all of the examples above.

One Level Deep Static Routes

Let's say you want the /blogs route for your application. Maybe this route will display the published posts.

There is two way to create an one level deep static route.

  1. You can create a file called blogs.js inside the pages folder →/pages/blogs.js

  2. You can create a folder called blogs and put the index.js file inside it →/pages/blogs/index.js

N Level Deep Static Routes

What if you want to show your favorite posts inside the /blogs/favorites?

If your pages are not dynamic, the rules are the same.

Again, there are two ways to create the route.

  1. You can create a favorites.js file inside your blogs folder → /pages/blogs/favorites.js

  2. You can create a folder called favorites inside the blogs folder and put an index.js file inside it →/pages/blogs/favorites/index.js

One Level Deep Dynamic Routes

We got /blogs and /blogs/favorites routes. However, we want to show blog posts!

We do not want to create a .js file for every blog post we have written. Fortunately, we have dynamic routes in Next.js.

If each blog post has a unique postId, we can create a nested route to catch it.

We create a [postId].js file inside the blogs folder → /pages/blogs/[postId].js

With that, we can catch routes like these: /blogs/a, /blogs/loneliness, /blogs/cool-post

But how can we access postId?

The useRouter hook will give you the postId property inside the query object whenever you are inside a dynamic routed page.

import { useRouter } from 'next/router'

const Post = () => {
  const router = useRouter()
  const { postId } = router.query
}

N Level Deep Dynamic Routes

Users can comment on our posts, and each comment has its permalink.

We want to create this route:/blogs/postId/commentId

Just like N Level Deep Static Routes, we can stack our dynamic routes → /blogs/[postId]/[commentId].js.

We can access postId and commentId with router.postId and router.commentId

Catch All Routes

What if we do not want to create a separate route to catch our comments?

We can accomplish this by creating a folder like this → /blogs/[...post].js.

Now we can catch all the sub routes with this page: /blogs/a, /blogs/a/b, /blogs/a/b/c/d/...

The post property inside the router object now returns an array which includes all the paths.

If the route is /blogs/5e2e0f12d362c20bb9c95190/6e7341a2e3019e60e9c0ef07/, the post property will be ["5e2e0f12d362c20bb9c95190","6e7341a2e3019e60e9c0ef07"].

So you access postId and commentId with post[0] and post[1].

Optional Catch All Routes

Catch All Routes will catch /blogs/a/b/c/d..., but what about /blogs path?

If you want to catch both /blogs and its children, you need to create a file like this → /pages/blogs/[[...post]].js

If the router.query.post is undefined, you can understand that we are inside the /blogs index route.