File-Based Routing in Next.js 13+

Routing has always been one of the main strengths of Next.js. Next.js uses file-based routing. How this approach works is representing the router using the file system along the page concept instead to having to configure a router yourself (with react-router-dom or any other library).

You can access to its superb documentation here.

The basics

First of all, it’s important to notice routing hasn’t suffer big changes in version 13 and almost the same name convections are still valid.

You have here completely free access to the Github repository with all the examples we are going to see in this post.

The main thing affecting routing in the new version comes with the introduction of a new directory, called app, instead of the already known pages.

Since v13, there is where the index router go, but also the rest of the pages have to be moved to the app directory. To create new routes we have to do the same than before, but adding to the folder a file called page.{tsx, jsx, js}. Remember files must be named page in order to be considered a page by the routing.

With that newfound knowledge, let’s break down this process into steps.

First, we have to create a Next.js application (you can just run npx create-next-app@latest — experimental-app setting all values you are asked by default). Then, if we open the project in VSC or your favourite editor, we can see a page.tsxwhich was created by default in the scaffolder (inside the app directory). This will be the Home page of your application.

If you want to create new nested routes, you need to create new folders, and inside them, a new page file. Just doing this, Next.js will create new routes for you.

Let’s do an example. Create a new page file inside an about folder. Basically what you have to do is adding inside the apps folder an about/page.tsx with the following code.

const About = () => <div>about</div> 
export default About;

Run npm run dev and navigate to localhost:3000/about. Here is an screenshot to illustrate the above.

We can create a new level in a simple way with a about/us/page.tsx under the app folder. Write the following code:

const Us = () => <div>about us</div>; 
export default Us;

On the other side, if we try a location with a non-existing page in the router, we get the following:

Dynamic routes

Many times routes are dynamic, and for example, we might need to fetch data depending a value coming from the url.

Let’s take an easy but explanatory use case. We have a blog, and we want to manage dynamically different posts.

The term slug, which is probably already known to you, it’s all we need to handle the pathname. To tell Next.js something is dynamic we use [slug] as the folder name. Inside, we have to create our page file as always.

const Post = ({ params }: { params: { slug: string } }) => { 
  return <div>My Post: {params.slug}</div>; 
} 
export default Post;

We can also do this when we have more than one segment. In this case we call the folder […slug]. Under app we can create a clothes/[…slug]/page.tsx. This will allow catching all segments. It means if you browse for localhost:3000/shop/women/jeans you will get women and jeans values. Here is the piece of code:

const Clothes = ({ params }: { params: { slug: string[] } }) => { 
  return ( 
    <> 
      {params.slug.map((slug) => ( 
        <div key={slug}>
          {slug}
        </div> 
      ))} 
    </> 
  ); 
}; 
export default Clothes;

And here is the result to illustrate the above:

You can find all this documentation and more about dynamic params here.

Router grouping

The last concept I want to talk about is router grouping. There are some cases, like when people you want to create a marketing site, but in the same app, have under authentication a dashboard and other app features. If you want to keep things separated but together, router grouping might be a good solution.

Let’s see it in one example.

Under the app directory, create a folder named (marketing). Then, inside, create a home/page.tsx and add it some text. We can add more like pricing, … . On the other side, we create a folder named (product), and under it a dashboard/page.tsx.

This way we can create different layouts, providers, … that group only certain router.

Probably you have asked yourself what happens if there is more than one home folder. In that case, Next.js will take always the first browsing by the app folder.

Summing up

It is undisputed that the routing system proposed by Next.js is very easy compared to many other tricky developments needed to both archive basic routing and manage query params in your router.

If Next.js is the right tool for your appliccation, you are lucky you will have probably if not the best, a top and easy way of handling application routes.

If you’re really ready to take your skills to the next level, don’t forget to hit the subscribe button in my profile ✉️.