A guide to Next.js app routing system
Tags: javascript, nextjs, react, tutorial
Published: 2023-08-15 11:45:29


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3nudic96awfd67ltlfdd.png)

**Introduction**
One of the primary benefits of using Next.js is the ease with which it handles routing and navigation. As opposed to react-router DOM, where you would have to set up routes for your application, Next.js makes it simple by implementing a file-based routing system.
In this article, we will talk about how routes are structured in the app router, as well as route grouping, nesting, and dynamic routes.

**Prerequisite:** This article requires that you have a basic understanding of what routing is and how it works in applications. Please take note that the examples in this article use Typescript.

**Next.js App router**
The app router is a feature that Next.js introduced in version 13, which provides more room to organise and streamline the process of managing routes in our application.
With the app router, we simply create folders (which are going to be the route names) inside the app directory, and inside each folder, we create the _page.tsx_ file, this indicates to Next.js that this is a route. The _page.tsx_ file inside the app root folder is rendered as the homepage.

**Nesting using the app router**
The app router allows us to create nested routes by adding additional folders inside the original folder.
Let us take the _about_ route as an example.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/46ghca1xs8scbamxpfxw.png)

When we navigate to the _/about_ route in our browser, this _page.tsx _file will be rendered because we created a folder called about and a _page.tsx_ file inside of it.

Now let's create two more folders inside the _about_ folder, namely _us_ and _our-service_.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/in122k72ke4ajwzk105o.png)

The respective paths we created for them would be rendered when we navigate to the _/about/us_ and _/about/our-service_ routes in the browser.

**Route grouping**
We can also organise routes in the app router by simply enclosing the top-level folder in parentheses. With this command, Next.js is instructed not to include the wrapped name in the route.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qb8jafi99ivy08ume5d7.png)

We added a folder named _auth_, which is wrapped in parentheses, to the app directory and then created _login_ and _signup_ folders inside of it. Enclosing the folder in parentheses removes _auth _from the route name.

**Dynamic route**
A dynamic route is a feature that enables us to create pages with dynamic segments in the URL paths. This is helpful when we want to create pages that have a similar structure but different content depending on the values in the URL.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jbg5jxkxbt437ubpytwb.png)
To create a dynamic route, the folder name is enclosed in square brackets [] within the app directory or inside the route folder we want to fetch dynamic data for, and a _page.tsx_ file is then created inside the enclosed folder. The name inside the brackets corresponds to the parameter we want to capture from the URL. For instance, in the image above, we added a folder called [id] in the app directory, which denotes that this page will use the "id" dynamic route parameter.

**Conclusion**
Next.js version 13 introduced the powerful app router feature, which allows developers to create organised routes and nested routes flexibly. This feature streamlines the way we structure our application's routes, making navigation and organisation more intuitive.
PLEASE FOLLOW FOR MORE CONTENT.