Routing in Next.js: Understanding Dynamic Routing

Next.js is a popular React-based web framework that allows you to build server-rendered applications. One of the most critical aspects of building a Next.js application is routing. Routing refers to how your application navigates between different pages.

In this article, we will discuss dynamic routing in Next.js, which allows you to create pages with dynamic content and URLs.

Dynamic routing is useful when you have pages that share a common layout but display different content based on the URL parameters. For example, if you are building an e-commerce website, you might have a page for each product, and each page would have a unique URL that includes the product ID.

Let’s dive into dynamic routing in Next.js and see how it works.

Step 1: Create a Dynamic Page

To create a dynamic page in Next.js, you need to create a file in the pages directory with square brackets in the file name. For example, if you want to create a page that displays a user’s profile based on their ID, you would make a file called pages/users/[id].js.

In this file, you can define the page layout and use the getServerSideProps function to fetch the user’s profile data based on the URL’s ID parameter.

In this example, the getServerSideProps function fetches data for the user with the ID specified in the URL parameter. The data is then passed to the UserProfile component as a prop.

Step 2: Link to the Dynamic Page

You can use the Link component from the next/link module to link to the dynamic page. You can pass the ID as a parameter in the URL object.

In this example, the UserList component fetches a list of users and creates a link for each user’s name that goes to their profile page with the ID as a parameter.

Step 3: Accessing Dynamic Routes

You can use the useRouter hook from the next/router module to access the dynamic route parameters in your page component.

In this example, the useRouter hook is used to access the ID parameter in the URL, which is used to fetch the user’s data.

Step 4: Customizing the URL

By default, the URL for the dynamic page will include the parameter value. For example, the URL for the user profile page with ID 123 would be /users/123. However, you can customize the URL by creating a file called [slug].js instead of [id].js.

In this file, you can define the layout of the page and use the getServerSideProps function to fetch the data for the user’s profile based on the slug parameter in the URL.

In this example, the getServerSideProps function fetches data for the user with the slug specified in the URL parameter. The data is then passed to the UserProfile component as a prop.

To link to the dynamic page with a custom URL, you can pass the slug as a parameter in the URL object.

In this example, the UserList component creates a link for each user’s name to their profile page with the slug as a parameter.

Conclusion

Dynamic routing is an essential feature of Next.js that allows you to create pages with dynamic content and URLs. With dynamic routing, you can easily create pages for each item in a list, products in an e-commerce store, or any other type of dynamic content.

In this article, we have seen how to create dynamic pages in Next.js, link to them, access dynamic route parameters, and customize the URL. Next.js makes dynamic routing easy and intuitive, allowing you to focus on building great user experiences for your users.

If you want to learn more about Next.js and dynamic routing, check out the official Next.js documentation and the Next.js tutorial on dynamic routing. Happy coding!