Next.js is a powerful framework that makes building single-page applications (SPAs) easy and intuitive. One of its key features is its built-in routing system, which allows you to create complex navigation structures and manage page transitions with ease. In this article, we’ll explore Next.js routing and show you how to use it to build SPAs that are fast, responsive, and easy to navigate.
Introduction to Next.js routing
Next.js routing is a built-in feature that allows you to create single-page applications that are fast, responsive, and easy to navigate. It supports traditional routing, dynamic routing, nested routing, and custom routes.
Traditional routing is based on the file system, where each file inside the pages directory represents a route. Dynamic routing allows you to create pages with variable parameters. Nested routing *enables you to create complex navigation structures. *Custom routes allow you to create custom URL structures. By leveraging Next.js routing, you can manage page transitions, trigger animations or other effects, and create SEO-friendly URLs.
In this article, we'll explore each type of routing in detail and show you how to use them to build engaging and dynamic single-page applications.
Static Routing
Static routing is the most basic and straightforward way of defining routes. It is based on the file system, where each file inside the pages directory represents a route. This means that when you create a new file in the pages directory, it automatically becomes a new route in your application. Static routing is ideal for simple applications that don't require dynamic content.
Example:
Let’s say you want to create a simple application that has three pages: home, about, and contact. To do this, you would create three files in the pages directory: index.js, about.js, and contact.js. The index.js file would represent the home page, the about.js file would represent the about page, and the contact.js file would represent the contact page.
When you run the application and navigate to the root URL, Next.js will automatically render the index.js file and display the home page. If you navigate to /about, Next.js will render the about.js file and display the about page, and so on. This is the basic concept of static routing in Next.js.
Dynamic Routing
Dynamic routing is a more advanced feature in Next.js that allows you to create pages with variable parameters. This means that you can create pages that display different content based on the URL parameters. Dynamic routing is achieved by using square brackets in the file name, like [id].js, and then using the useRouter hook to access the dynamic parameters and fetch data based on them.
Example:
Let’s say you want to create a blog application where each blog post has a unique ID. Instead of creating a new file for each blog post, you can use dynamic routing to create a single file that displays the content for each blog post based on the ID in the URL. To do this, you would create a file called blog/[id].js in the pages directory.
When a user navigates to /blog/123, Next.js will render the blog/[id].js file and pass the value 123 as a parameter. You can then use the useRouter hook to access the id parameter and fetch the content for the blog post with that ID. This allows you to create a dynamic and scalable blog application without the need for creating a new file for each blog post.
Nested Routing
Nested routing in Next.js allows you to create complex navigation structures by nesting routes inside each other. This means that you can create pages that are accessible through multiple URLs, and also have multiple pages inside a single parent page. Nested routing is achieved by creating subdirectories inside the pages directory, and then creating files inside those subdirectories to represent the nested routes.
Example:
Let’s say you have a product catalog application where each product belongs to a specific category and has a unique ID. You can use nested routing to create a structure like /products/category-1/123, /products/category-2/456, etc. To do this, you would create a subdirectory called products inside the pages directory, and then create a subdirectory inside products called [category]. Inside the [category] subdirectory, you would create a file called [id].js.
When a user navigates to /products/category-1/123, Next.js will render the products/[category]/[id].js file and pass the values category-1 and 123 as parameters. You can then use the useRouter hook to access the category and id parameters and fetch the details for that specific product. This allows you to create a dynamic and scalable product catalog application with nested routing in Next.js.
Custom Routes
Custom routing in Next.js allows you to define your own routing rules and patterns for your application. This means that you can create custom URLs that don’t follow the default routing rules in Next.js. Custom routing is achieved by defining a rewrites property in the next.config.js file.
Example:
Let’s say you want to create a custom URL for a specific page in your application. You can define a rewrite rule in next.config.js that maps the custom URL to the actual page in your application.
Here’s an example of how to create a custom URL /about for the pages/about.js page:
// next.config.js
module.exports = {
async rewrites() {
return [
{
source: '/about',
destination: '/about',
},
];
},
};
When a user navigates to /about, Next.js will rewrite the URL to match the destination and render the pages/about.js page. This allows you to create custom URLs that are easy to remember and share with others.
Conclusion
Next.js routing is a powerful tool for building SPAs that are fast, responsive, and easy to navigate. By leveraging its built-in routing system, you can create complex navigation structures, manage page transitions, and customize your URL structure to fit your application's needs. By following the examples and tips outlined in this article, you can take your Next.js application to the next level and create an engaging user experience for your audience.
Top comments (1)
really helpful article!