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

• Next.jsでSSGの挙動をローカル環境で確認する方法
  • 手順
  • 開発モードでの確認
  • 確認ポイント

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

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

手順

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

cd sample-project

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

export async function getStaticProps() { return { props: {

 message: 'Hello, static world!'

} }; }

const Home = ({ message }) => { return

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