Next.jsのルーティング

Next.jsでは、ファイルベースのルーティングを使用して、ページを簡単に作成できます。以下に、基本的なルーティングの例を示します。

/pages
  |-- index.js  // ホームページ
  |-- about.js  // /aboutページ
  |-- blog/
      |-- [id].js  // 動的ルーティング

動的ルーティング

動的ルーティングを使用して、パラメータを含むURLを処理します。

/pages/blog/[id].js

import { useRouter } from 'next/router';

const BlogPost = () => {
  const router = useRouter();
  const { id } = router.query;

  return <p>Blog Post: {id}</p>;
};

export default BlogPost;