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:
<pre>
// 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;
</pre>
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:
<pre>
import Link from 'next/link';
<Link href="/post/[id]" as="/post/1">
<a>Post 1</a>
</Link>
</pre>
In this code, clicking the "Post 1" link will take you to the dynamic route /post/1.