Contents
Nuxt.js 3で静的サイト生成（SSG）とVercelデプロイの体系的な手順
Nuxt.js 3を用いた静的サイト生成（SSG）とVercelへのデプロイは、パフォーマンスと開発効率を両立させる現代的なウェブ構築手法です。本記事では、Node.js 18+環境に最適化された最新手順と、Vercel特化型のデプロイ方法をステップバイステップで解説します。Nuxt.js 3 静的サイト生成 デプロイ Vercelというキーワードを軸に、技術的な詳細まで網羅しています。
Nuxt.js 3プロジェクトの初期設定
Nuxt.js 3プロジェクトの初期設定は、nuxi initコマンドにより迅速に完了します。SSGモード有効化にはssr: falseの指定が必要で、Node.js 18+環境での動作も確認済みです。
nuxi initによるプロジェクト作成
Nuxt.js 3では、公式が推奨するnuxi CLIツールを用いてプロジェクトを作成します。以下の手順で初期設定を行います。
- Node.js 18+とnpm/pnpmをインストール済みであること確認
- コマンドラインで
npx nuxi init <プロジェクト名>を実行 - プロジェクトテンプレートを選択（
appまたはspa推奨） - 生成されたディレクトリに移動し、
npm installを実行
この時点でNode.jsのバージョンが18以上であることが必須です。以下はSSG/SSRモードの選択比較表です。
| モード | 説明 | 適用シーン |
|---|---|---|
| SSG（ssr: false） | 静的生成による高速ロード | サイト内リンクが多い静的ページ構築 |
| SSR（ssr: true） | サーバーサイドレンダリング | 動的なコンテンツ更新が必要なケース |
SSGモードの有効化方法
プロジェクト初期設定時にnuxi initで選択するテンプレートによって、自動的にSSG/SSRモードが決まります。SSGモードを明示的に有効化したい場合は、nuxt.config.tsにssr: falseを追加します。
|
1 2 3 4 |
export default defineNuxtConfig({ ssr: false, // SSGモードの有効化 }) |
この設定により、npm run generateで静的ファイルが生成され、Vercelデプロイに最適な構成になります。
静的生成設定の詳細
SSG環境を確立するには、baseURLの設定方法と動的ルート対応策の2つのポイントが不可欠です。特にapp.baseURLとruntimeConfig.app.baseURLの使い分けやprerenderオプションの指定がミソです。
baseURLの正しい設定方法
静的サイトを構築する際、baseURLはサイト全体のURL構造に直接影響します。2つの設定方法があり、用途によって使い分ける必要があります。
- app.baseURL：環境ごとに固定値を指定（例: テスト用ドメイン）
- runtimeConfig.app.baseURL：開発・本番環境で切り替え可能な動的値
具体例として、nuxt.config.ts内で以下のように設定します。
|
1 2 3 4 5 6 7 8 9 10 11 |
export default defineNuxtConfig({ app: { baseURL: '/', // サイトのルートパス指定 }, runtimeConfig: { public: { appBaseURL: process.env.APP_BASE_URL || '/', // 環境変数から読み込み } } }) |
注意：Vercelデプロイ時に
APP_BASE_URLは環境変数で設定する必要があります。
動的ルート対応のprerender設定
動的なURLが存在する場合（例: /user/[id].vue）、prerenderオプションで事前に生成するパスを指定します。以下は基本設定例です。
|
1 2 3 4 5 6 7 |
export default defineNuxtConfig({ modules: ['@nuxtjs/prerender'], prerender: { routes: ['/user/1', '/user/2'], // 先に生成する動的ルート } }) |
prerenderはSSGのパフォーマンスを向上させる重要な技術です。動的ルート数が多すぎる場合、メモリ不足でエラーになる可能性があるため、適切に制限してください。
注意点: 動的ルートが多い場合、
prerenderオプションの指定によりメモリ使用量が増える傾向があります。動的パス数を監視し、必要最小限に抑えることが推奨されます。
静的ファイルの生成プロセス
静的ファイル生成はnpm run generateコマンド一発で完了します。生成されるdist/フォルダ内の構造と処理フローを確認しましょう。
generateコマンドの実行手順
以下のコマンドをプロジェクトルートから実行します。
|
1 2 |
npm run generate |
このコマンドは、以下のようなフローで動作します。
- 全てのページを静的HTMLに変換（SSG処理）
prerender設定された動的ルートを個別に生成- 生成されたファイルを
dist/フォルダにまとめる
注意：動的ルートが多い場合、メモリ使用量が増えるため、
--no-spaオプションで不要な処理を省略できます。
出力ディレクトリ構造確認
生成されたdist/フォルダの構造は以下のようになります。
|
1 2 3 4 5 6 7 8 |
dist/ ├── index.html ├── _nuxt/ │ ├── app.[hash].js │ └── chunks/ └── assets/ └── images/ |
index.html：サイトトップページ_nuxt/：JavaScriptのバンドルファイルassets/：静的リソース（画像など）
この構造は、Vercelへのデプロイに最適化されています。
Vercelへのデプロイ手順
生成された静的ファイルをVercelで公開するには、以下の2つの準備が必要です。特にnuxi deployコマンドの活用が簡潔なステップになります。
Vercel CLIのインストール
Vercel CLIをプロジェクトにインストールします。
|
1 2 |
npm install -g vercel |
または、package.jsonに以下を追加してローカルインストール可能です。
|
1 2 3 4 5 6 |
{ "devDependencies": { "vercel": "^30.4.0" } } |
nuxi deployコマンドの実行
Vercelへのデプロイは、以下の手順で完了します。
- Vercelアカウントを作成（https://vercel.com）
- プロジェクトを初期化：
nuxi deploy init npm run generateで静的ファイル生成nuxi deployを実行し、Vercelにアップロード
|
1 2 |
nuxi deploy |
このコマンドは、プロジェクトの構成ファイル（.vercel）に基づいて自動的にデプロイ先を決定します。初回設定時にドメインや環境変数を指定できるため、柔軟性が高いです。
実行フロー:
nuxi deploy initコマンドは、Vercelのプロジェクト設定ファイル（.vercel/project.json）を作成し、デプロイ時のベースとなる構成を定義します。その後、nuxi deployで静的生成されたdist/フォルダが自動的にアップロードされます。注意：Vercelで公開されたURLは、
https://<プロジェクト名>.vercel.app/の形式になります。
デプロイ後の検証方法
デプロイ後も正確な動作確認が不可欠です。特にURL構造とクライアントサイドナビゲーションのテストが重要です。
URL構造の確認手順
Vercelが生成したURLは、<プロジェクト名>.vercel.app/という固定形式になります。動的ルートの検証例として、以下のアクセスを試してください。
https://<プロジェクト名>.vercel.app/https://<プロジェクト名>.vercel.app/user/1
チェックポイント：URLに
?_vercel_preview=trueが含まれていないか確認してください。存在する場合は、preview versionではなく最新バージョンをデプロイしていない可能性があります。
SSG動作チェックポイント
SSG環境では、以下の2点をテストすることが重要です。
- クライアントサイドナビゲーションのテスト
router.push()でページ移動し、URLが変化するか確認- リロード時の挙動確認
- ブラウザで
F5キーを押し、静的ファイルが正しく読み込まれるか
両方のテストに成功すれば、SSG環境は正常に構築されています。
本記事では、Nuxt.js 3による静的サイト生成（SSG）とVercelへのデプロイについて、最新情報に基づいた体系的な手順を解説しました。ステップバイステップで実装し、今すぐプロジェクトを作成して、本記事のステップに沿ってSSG環境を構築しよう。