Next.jsで静的サイト生成を始める前に知っておくべきこと

2026年7月2日

Contents

1 Next.jsプロジェクトの初期設定
- 1.1 プロジェクト作成手順
- 1.2 必要な依存関係のインストール
2 getStaticPropsの実装と動的データ取得
- 2.1 基本構文と引数の使い方
- 2.2 APIエンドポイントからのデータフェッチ例
3 静的生成ページのビルドプロセス
- 3.1 next buildコマンドの実行手順
- 3.2 出力ディレクトリ構造の確認
4 Vercelでのデプロイ手順
- 4.1 Vercelとの連携の利点
- 4.2 プロジェクトの準備
  - 4.2.1 vercel.jsonファイルの構成例
5 SSGとISRの違い
- 5.1 仕組みの比較表
- 5.2 適用ケースの具体例
6 まとめ

スポンサードリンク

Next.jsプロジェクトの初期設定

Next.jsによる静的サイト構築は、プロジェクトの初期設定が非常に重要です。適切な準備をすることで、後続の開発プロセスがスムーズになります。

プロジェクト作成手順

Next.jsの新規プロジェクトを作成するには、以下のコマンドを使用します。

テーミングリーンで新しいディレクトリを作成し、移動します。
npx create-next-app@latest を実行します。
プロジェクト名を入力し、オプションパッケージ（TypeScriptやTailwind CSSなど）の追加を確認します。

この手順で作成されたプロジェクトは、Next.js 14対応の最新構造となります。

注意: create-next-appを使用する際には、npmまたはyarnが事前にインストールされている必要があります。

必要な依存関係のインストール

プロジェクト作成時にオプションで追加したパッケージ以外にも、静的サイト構築に必要なライブラリをインストールする場合があります。たとえば、Tailwind CSSを使う場合は以下のコマンドが必要です。

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

npm install -D tailwindcss postcss autoprefixer

npx tailwindcss init -p

このようにして準備されたプロジェクトは、静的サイト生成の基礎が整います。

getStaticPropsの実装と動的データ取得

Next.jsで静的サイトを構築する際には、getStaticProps関数が不可欠です。この関数を用いることで、ビルド時に外部APIからデータをフェッチし、静的なHTMLに変換することができます。

基本構文と引数の使い方

getStaticPropsは、Next.jsページコンポーネント内で定義される関数です。基本的な構文は以下の通りです。

export async function getStaticProps() {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();

  return {
    props: { data },
  };
}

export async function getStaticProps() {

const res = await fetch('https://api.example.com/data');

const data = await res.json();

return {

props: { data },

};

}

この例では、fetch()関数で外部APIからデータを取得し、ページコンポーネントに渡しています。

ポイント: getStaticPropsはビルド時のみ実行されるため、動的なデータが必要な場合はこれを使うのが最適です。

APIエンドポイントからのデータフェッチ例

具体的な実装では、静的サイト生成時に必要なデータを取得するAPIエンドポイントと連携します。以下は、posts/1, posts/2といった動的なルートで記事情報を取得する例です。

export async function getStaticProps({ params }) {
  const res = await fetch(`https://api.example.com/posts/${params.id}`);
  const post = await res.json();

  return {
    props: { post },
  };
}

export async function getStaticProps({ params }) {

const res = await fetch(`https://api.example.com/posts/${params.id}`);

const post = await res.json();

return {

props: { post },

};

}

このように実装することで、静的サイト生成時にAPI呼び出しが自動的に実行され、HTMLが作成されます。

静的生成ページのビルドプロセス

Next.jsで静的サイトを構築した後は、next buildコマンドを使ってページをビルドします。このプロセスでは、すべてのページが事前にHTMLに変換され、配信速度が向上します。

next buildコマンドの実行手順

静的サイトのビルドには以下のステップが必要です。

npm run buildまたはnext buildを実行します。
ビルドが完了すると、.nextディレクトリに生成されたファイルが保存されます。
これらのファイルをサーバーに配置することで、静的サイトとして公開できます。

ビルド時に生成されるファイルは、すべてのルートに対して最適化されたHTML形式です。

出力ディレクトリ構造の確認

ビルド後には.nextフォルダ以下に以下の構造が出来上がります。

フォルダ/ファイル	内容
`server/`	サーバーコード（SSR用）
`static/`	静的リソース（画像やCSSなど）
`pages/`	ページファイル（ルート構造）

この構造により、Next.jsは自動的にファイルベースルーティングを実行し、静的HTMLを生成します。

Vercelでのデプロイ手順

Next.jsで作成した静的サイトを本番環境に公開するには、Vercelへのデプロイが最適です。VercelはNext.js公式のホスティングサービスであり、簡単な設定で高速かつ信頼性のあるWebサイトを作成できます。

Vercelとの連携の利点

自動CI/CD: GitHubやGitLabなどのリポジトリを連携させることで、コード更新時に自動ビルド・デプロイが可能。
グローバルCDN: 全世界のユーザーに最適なパフォーマンスを提供。
インフラ管理不要: サーバー構築や設定はVercelが一括管理。

プロジェクトの準備

Vercelへのデプロイに必要なのは以下の2点です。

vercel.jsonファイル
GitHubやGitLabなどのリポジトリへのコードのプッシュ

vercel.jsonファイルの構成例

{
  &quot;name&quot;: &quot;my-nextjs-site&quot;,
  &quot;builds&quot;: [
    {
      &quot;src&quot;: &quot;next.config.js&quot;,
      &quot;use&quot;: &quot;@vercel/next&quot;
    }
  ]
}

{

"name": "my-nextjs-site",

"builds": [

{

"src": "next.config.js",

"use": "@vercel/next"

}

]

}

注意: 最新版ではvercel.jsonの指定は必須ではなく、プロジェクト構成に応じて自動的に検出される場合があります。

SSGとISRの違い

Next.jsでは、SSG（静的サイト生成）とISR（インクリメンタルスタティックリジェネレーション）という2つの手法があります。それぞれの特徴を理解し、適切に使い分けることが重要です。

仕組みの比較表

項目	SSG	ISR
生成タイミング	ビルド時に一括生成	要求時や指定された間隔で再生成
更新頻度	静的コンテンツに適する	動的なデータ更新が必要な場合に適す
パフォーマンス	初回リクエストが速い	要求時の遅延が発生する可能性あり

適用ケースの具体例

SSGを採用すべきケース: ブログ記事やFAQページなど、頻繁に更新されない静的コンテンツ。
ISRを採用すべきケース: 新着情報やリアルタイムなデータが必要な場合（たとえばニュースサイト）。

このように、用途に応じてSSGとISRを使い分けることで、Webサイトのパフォーマンスと管理性を最適化できます。

まとめ

本記事では、Next.jsで静的サイト生成を行うための具体的な手順を解説しました。

プロジェクト初期設定: npx create-next-appによる新規作成とオプションパッケージの追加
データ取得: getStaticProps関数によるAPI呼び出しと動的データのフェッチ
ビルドプロセス: next buildコマンドでHTMLファイルを生成
Vercelデプロイ: リポジトリ連携とCI/CD設定で即時公開
SSGとISRの違い: 静的コンテンツ・動的コンテンツに応じた最適な手法選び

これらの知識を活用することで、自社の静的サイト構築がスムーズに行えるようになります。ぜひ本記事に従ってNext.jsプロジェクトを構築し、静的サイト生成の実装を試してみてください。

スポンサードリンク