Next.js is an accomplished React framework that provides server-side rendering (SSR), static site generation (SSG), and API routes built in. One of its major features is dynamic routing, which gives developers the essential honing tools of creating flexible and scalable URL structures and making applications all the more dynamic and interactive. 

Traditional static routing is fine when manually defining each page for small applications. However, as complexity is added to apps, static routing becomes more and more inefficient. An e-commerce platform with unique URLs for each product or a blog with a dedicated page for each post is practically impossible. Hence, comes dynamic routing; with the help of dynamic routing in Next.js, developers can build highly scalable applications and clean, well-organized URL structures. 

This blog will help you learn how to use dynamic routing with the help of NextJS. First, we will understand what basically Next.js’ routing system is and what is dynamic routing. Also, this blog contains code snippets from place to place to make your learning experience richer.

1. Understanding Next.js Routing System

Next.js uses a file-based routing system, so the pages directory automatically dictates the URL structure. Instead of using react-router-dom, as with normal React apps, Next.js routes are automatically created based on the file names. 

For example:

/pages
 ├── index.js       ->  " / "
 ├── about.js       ->  " /about "
 ├── contact.js     ->  " /contact "

The above structure automatically generates the following URLs:

• https://yourwebsite.com/ (Home Page)

• https://yourwebsite.com/about (About Page)

• https://yourwebsite.com/contact (Contact Page)

This system works well for static routes, but for dynamic content, we need dynamic routes.

2. What is dynamic routing in Next.js?

Dynamic routing enables pages to be generated based on dynamic parameters. This is useful when building applications where URLs are based on user-generated or external data.

To create a dynamic route, Next.js uses square brackets ([param]) in the pages directory. For example, if we want to create user profile pages dynamically (/users/:id), we can do this:

/pages
 ├── index.js
 ├── users
 │   ├── [id].js  ->  " /users/:id "

Here, [id].js is a dynamic route, and it will handle all requests like:

• /users/1

• /users/2

• /users/john-doe

Now, let’s see how to fetch and display data dynamically inside this page.

3. Implementing a Basic Dynamic Route

In pages/users/[id].js, we can access the dynamic id parameter using Next.js router.

import { useRouter } from 'next/router';
const UserProfile = () => {
    const router = useRouter();
    const { id } = router.query;
    return (
        <div>
            <h1>User Profile</h1>
            <p>User ID: {id}</p>
        </div>
    );
};
export default UserProfile;

Explanation:

• useRouter() gives access to the router object.

• router.query.id extracts the dynamic segment from the URL.

• The page displays the id dynamically based on the URL parameter.

Try navigating to /users/123, and you will see:

User ID: 123

4. Fetching Dynamic Data Using getServerSideProps

If we want to fetch data from an API based on the dynamic id, we can use getServerSideProps.

export async function getServerSideProps(context) {
    const { id } = context.params;
    const res = await fetch(`https://jsonplaceholder.typicode.com/users/${id}`);
    const user = await res.json();
    return {
        props: { user },
    };
}
const UserProfile = ({ user }) => {
    return (
        <div>
            <h1>{user.name}</h1>
            <p>Email: {user.email}</p>
            <p>Phone: {user.phone}</p>
        </div>
    );
};
export default UserProfile;

Now, visiting /users/1 will fetch user data dynamically from an API.

Conclusion

Dynamic routing in Next.js is a game changer when it comes to modern web application development. With dynamic, catch-all, and nested routes, developers can just focus on building scalable applications without much hassle. Having sufficient knowledge on how to access the dynamic parameters and dynamically fetch data will smoothen the development process. 

One of the biggest advantages of Next.js dynamic routing is its seamless integration with APIs and databases. Whether fetching real-time data or generating static pages dynamically, the framework ensures high performance and efficiency. With features like getServerSideProps and getStaticProps, developers can optimize applications for both server-side rendering and static generation.

Superflex.ai applies AI-powered Figma to React conversion robustly integrated with VS Code to make the workflow of coding more efficient. 

Be Ready to Change the Way You Work? Go to Superflex.ai and reinvent how you create front-end applications.