Next.js App RouterでSSGサイトを構築する方法

はじめに

Next.jsはReactベースのフレームワークで、SSR（Server Side Rendering）だけでなく、SSG（Static Site Generation）にも対応しています。

この記事では、App Routerを使って完全な静的サイトを構築する方法を解説します。

プロジェクトのセットアップ

まず、Next.jsプロジェクトを作成します。

npx create-next-app@latest my-site --typescript --tailwind --app

SSGの設定

next.config.tsに以下の設定を追加します。

output: "export" を指定することで、next build 実行時に完全な静的HTMLが生成されます。

Markdownベースのブログ

ブログ記事はMarkdownファイルで管理し、ビルド時に静的HTMLに変換します。フロントマターでメタデータ（タイトル、日付、タグ）を定義できます。

Vercelへのデプロイ

GitHubリポジトリをVercelに接続するだけで、自動デプロイが設定されます。プッシュするたびにビルドとデプロイが実行されます。

まとめ

Next.js App RouterとSSGの組み合わせは、パフォーマンスとDX（Developer Experience）の両方を実現できる優れた選択肢です。