File-system Based Dynamic Route Creation

// pages/[id].js
import { useRouter } from 'next/router';

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

  return (
    <>
      <h1>Post: {id}</h1>
      <p>This is a dynamic page showing content based on the URL id.</p>
    </>
  );
}

This is a Next.js page component. The filename `[id].js` allows for dynamic routing based on the file-system. The page will match any route like `/post/1`, `/post/abc`, etc., where `1` or `abc` is the dynamic part of the URL and can be accessed via `router.query.id`. The code uses Next.js's useRouter hook to access the router object and extract the dynamic segment (`id`) from the URL. The page then renders content dynamically based on the value of `id`.