Dynamic Routing with Next.js

File-based Routing:

Next.js simplifies dynamic routing through file-based structures. For instance, [slug].js in the pages/posts directory generates dynamic routes for posts based on their slugs, streamlining the creation of dynamic pages.

import { useRouter } from 'next/router'

export default function Post() {
 const router = useRouter()
 const { slug } = router.query

 return (
  <div>
   <h1>Post: {slug}</h1>
   {/* Fetch post content based on slug */}
  </div>
 )
}

The [slug].js file defines dynamic route for individual blog posts.