File-system Based Dynamic Route Creation

Showcase how to create a basic dynamic page using the file-system routing mechanism by creating a page with a dynamic segment in the filename, such as [id].js.
// 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 ``. 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`.