Introduction
Next.js is a react framework that comes with all the features that you need for production. It uses a file-based routing system that enables routing in your application. When a file is added to the pages folder in a project, it automatically becomes available as a route.
In this blog, we will be looking at how routing works in next.js, nested routes, dynamic routes, and so on. So stick to this blog to understand how routing can be implemented in a next.js application.
How Routing works in Next.js?
Next.js uses a file-based mechanism to enable routing in the application. The index.js file in the pages folder is treated as the home route. Next.js automatically considers the files ( having extensions as .js, .ts, .jsx, .tsx ) within the pages folder as a route.
A Next.js page is nothing but a react functional component having a route based on its filename.
Take a look at the below file structure :
├──pages| ├── index.js| ├──about.js| └──profile.js
index.js file above is the domain root that is accessible at http://localhost:3000(for local server)about.js will be accessible at http://localhost:3000/aboutand profile.js is accessible at http://localhost:3000/profile
Nested Routing
A nested route allows you to have a parent component that controls the rendering of the child component at the route level. Let’s see the below example of how you can create a nested route in the next.js application.
Consider the above scenario where we are having a blog page with two blogs. To implement the scenario follow the steps :
1. Create a sub-folder in the pages folder named blog
2. Inside the blog folder create an index.js file to implement the route “/blog” ( the index.js file inside a folder nested under the pages folder will map to the root of the folder name as a route i.e. “/blog” in this case ).
3. at last we will be creating two files named first.js and second.js ( these two pages will be loaded as nested routes of the blog like “/blog/first” and “/blog/second”.
This method of creating a nested route help better organization and grouping of related files together.
Dynamic Routing
Having a static path is not always enough when you are creating an application. An application has static as well as dynamic routes especially when it is a complex application. In a dynamic route, we pass parameters to get the desired data from the server.
Consider a scenario of an e-commerce application where it has thousands of products and for each product, there exists a product detail page. In this case, it is not possible to define static routes for each product, here comes the need for a dynamic route where we can pass unique param that then in return gives the required product details.
Let’s see how we can implement a dynamic route in the next.js application.
Consider the above example where we have a product page with many products and we want to see the detail page of each product. To implement the scenario follow these steps.
1. Create a sub-folder ( for better organization ) named product in the pages folder.
2. Inside the product folder create an index.js file that will represent the root folder name as a route i.e. “/product”.
3. Inside the folder create a file with square brackets mentioning the params ( product-id in this case ) like “ [productId].js ”.
4. Now if you hit “locahost:3000/product/<productId>” you can see the product detail page is rendered. This is because next.js treats square brackets in a file name as a dynamic segment to create a dynamic route.
In the actual scenario, we will not only be displaying static content for each product rather we will be displaying the product-specific details. To do so we have to extract the route parameter i.e. the product id.
For that next.js provides us a hook called useRouter. You can simply import it from “next/router”. The useRouter hook returns us a router object and then from the router object, we get the query object and can extract the product id from there. See the code below to understand better.
import { useRouter } from "next/router"
function ProductDetails() {
const router = useRouter();
const productId = router.query.productId;
return <h1> Product Id : {productId} </h1>
}
export default ProductDetailsBy following the above steps you are good to create a dynamic route.
Nested Dynamic Route
In a complex application, you might fall into a situation where you need to have a nested route inside a dynamic route. Consider the above case where we were having a separate product detail page for each product, having the same let’s consider a scenario where we want to get a specific review for a particular product like we need to see the first review of the first product.
In this case, we need to pass the review id to get the first review, the URL will look something like this
“ localhost:3000/product/1/review/1 “
Let’s implement the above case in next.js by following below steps :
1. Create a sub-folder using the square brackets as [productId] under the product folder as next.js treats square brackets as a dynamic segment, inside the [producId] folder create an index.js file to map to the root folder route.
2. Next inside the [productId] folder create a sub-folder named review and then an index.js file inside it to get to the “ product/1/review “ path.
3. Finally create a file with square brackets under the review folder as [reviewId].js to get the path as “ /product/1/review/1 “.
For extracting the review Id use the same approach of using useRouter hook as we did earlier and you are done.
Conclusion
In this blog, we learned how routing works in next.js and how we can create nested and dynamic routes implementing different scenarios. Hope you followed the blog and gain a complete understanding of routing in next.js
To get more understanding of next.js topics visit: Next.js Documentation
Want to learn how to get started with next.js follow the link: Next.js Blog
Thank you for reading out this blog. For more updates on such topics, please follow our LinkedIn page: FrontEnd Studio
