A guide to Next.js app routing system

#javascript #nextjs #react #tutorial

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.

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.

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.

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.

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.