Next.jsでSSGの挙動をローカル環境で確認する方法

Next.jsでSSGの挙動をローカル環境で確認する方法

Next.jsで静的サイト生成（SSG）の挙動をローカル環境で確認する方法は、以下の手順で行います。

手順

1. プロジェクトディレクトリに移動

cd sample-project

2. SSGの設定
Next.jsでは、getStaticProps関数を使用してSSGを設定します。
例として、pagesディレクトリにあるページで以下のように設定します。

// pages/index.js
export async function getStaticProps() {
 return {
   props: {
     // ページに渡すデータ
     message: 'Hello, static world!'
   }
 };
}

const Home = ({ message }) => {
 return <div>{message}</div>;
}

export default Home;

3. ビルドと起動
SSGの挙動を確認するために、まずプロジェクトをビルドし、その後にローカルサーバーで起動します。

# プロジェクトのビルド
npm run build

# ローカルサーバーで起動
npm run start

これで、localhost:3000にアクセスすると、静的に生成されたページを確認することができます。

開発モードでの確認

開発中にSSGの挙動を確認する場合は、npm run devを使用します。
このモードでは、ページを保存するたびに静的ページが自動的に再生成され、ブラウザに反映されます。

# 開発モードでの起動
npm run dev

確認ポイント

ビルド時に生成されるHTMLファイル
.nextディレクトリ内のstaticフォルダに静的に生成されたHTMLファイルがあります。
コンソールログ
getStaticProps内にconsole.logを追加してデータ取得の確認ができます。

これで、Next.jsのSSGの挙動をローカル環境で確認する方法が理解できると思います。
必要に応じて、ビルド後の生成物を確認したり、実際に生成されたページをブラウザで確認することができます。