Introduction to Dynamic Routing

Dynamic routing in Next.js allows you to create routes with variable segments, enabling you to build flexible and data-driven pages. In this tutorial, we'll walk through the steps of creating a dynamic route in Next.js.

Creating a Dynamic Route

1. Start by creating a new file in the "pages" directory. You can use brackets [ ] to indicate dynamic segments in your route. For example, create a file named [id].js:

// pages/post/[id].js
import { useRouter } from 'next/router';
function PostPage() {
    const router = useRouter();
    const { id } = router.query;
    return (
        <div>
            <h1>Post {id}</h1>
            <p>This is a dynamic route for post {id}.</p>
        </div>
    );
}
export default PostPage;
                

In this example, the value of id is dynamic and can change based on the URL segment.

2. Next, you can access the dynamic route by visiting URLs like /post/1 or /post/2, and the component will display the respective id value.

Linking to Dynamic Routes

Linking to dynamic routes in Next.js is straightforward. Use the Link component with dynamic parameters. For example:

import Link from 'next/link';
<Link href="/post/[id]" as="/post/1">
    <a>Post 1</a>
</Link>
                

In this code, clicking the "Post 1" link will take you to the dynamic route /post/1.