Dynamic Routing in Next.js

1. Introduction

Next.js is a powerful React framework that enables server-side rendering and static site generation. One of its prominent features is dynamic routing, which allows developers to create routes that can change based on the content or data.

2. Dynamic Route Basics

Dynamic routing is achieved in Next.js by using file-based routing. By creating files with square brackets in their names, you can define dynamic routes that can accept parameters.

2.1 Example of Dynamic Route Structure

For example, to create a dynamic route for blog posts, you might structure your pages like this:

pages/posts/[id].js

3. Creating Dynamic Routes

To create a dynamic route, follow these steps:

1. Create a new file in the pages directory with the desired dynamic parameter in square brackets.
2. Export a component from this file that will handle rendering the page.
3. Use getStaticPaths and getStaticProps for data fetching.

3.1 Code Example

import { useRouter } from 'next/router';

const Post = ({ post }) => {
    const router = useRouter();
    // If the page is not ready yet, show a loading state
    if (router.isFallback) {
        return 
Loading...
;
    }

    return (
        

            
{post.title}
            
{post.content}
        
    );
};

export async function getStaticPaths() {
    const res = await fetch('https://api.example.com/posts');
    const posts = await res.json();

    const paths = posts.map(post => ({
        params: { id: post.id.toString() },
    }));

    return { paths, fallback: true };
}

export async function getStaticProps({ params }) {
    const res = await fetch(`https://api.example.com/posts/${params.id}`);
    const post = await res.json();

    return { props: { post } };
}

export default Post;
        

4. Data Fetching

Dynamic routes often involve fetching data based on the dynamic parameter. In the example above, we used getStaticProps and getStaticPaths for data fetching at build time.

5. Best Practices

• Use descriptive and meaningful dynamic parameter names.
• Implement fallback options for loading states when using getStaticPaths.
• Optimize API requests to minimize loading times.

6. FAQ