Contents
Nuxt 3とVercelで静的サイト構築の概要
Nuxt 3は、Vue.jsに基づく現代的なフロントエンドフレームワークとして注目を集めています。特に静的サイト生成（SSG）機能を活用することで、高速なレンダリングとSEO対策が可能です。VercelはこのSSG構築に最適化されたホスティングプラットフォームであり、手軽にデプロイできる点が強みです。本記事では、Nuxt 3で静的サイトを構築し、Vercelへのデプロイフローと技術的な詳細を体系的に解説します。この記事を通じて、SSGの利点や具体的な実装方法、ホスティングサービス選定時の判断基準を理解できます。
Node.js環境構築とパッケージマネージャー準備
Nuxt 3プロジェクトを立ち上げるには、Node.jsの環境が必須です。最新の安定版であるLTS（Long Term Support）版を導入し、npmまたはpnpmを使用して依存関係を管理することが推奨されます。
Node.jsとnpm/pnpmのインストール確認
- Node.jsのバージョン：Nuxt 3はNode.js v18以降をサポートしています。
node -vコマンドでバージョンを確認してください。 - パッケージマネージャー選択：
npm：最も広く利用されるパッケージマネージャーpnpm：高速な依存関係管理が可能（npm install pnpm -gでインストール）
注意点：プロジェクト初期化前にNode.jsとnpm/pnpmの環境を整えることで、後続の手順でエラーを回避できます。
nuxi initによるプロジェクト初期化
Nuxt 3ではnuxiコマンドを使用してプロジェクトを素早く生成できます。テンプレート選択時の注意点やプロジェクト構成を確認しましょう。
テンプレート選択時の注意点
- 「default」テンプレート：最小限の設定で始める場合に適しています。
- カスタムテンプレート：特定の機能（例: Tailwind CSS）が欲しい場合は、テンプレート名を指定してください。
プロジェクト構成確認
初期化後、以下のようなディレクトリ構造が生成されます：
|
1 2 3 4 5 6 7 8 9 |
nuxt-project/ ├── assets/ ├── components/ ├── layouts/ ├── pages/ ├── plugins/ ├── utils/ └── nuxt.config.ts |
pages/：ルーティング設定のためのファイル配置nuxt.config.ts：プロジェクト全体の設定を管理
静的サイト生成(SSG)向け設定
Nuxt 3ではSSR（サーバーサイドレンダリング）を無効化し、静的サイト生成(SSG)が可能です。以下の設定でプリレンダリングを実行します。
ssr: falseの有効化
nuxt.config.tsに以下のように記述します：
|
1 2 3 4 |
export default defineNuxtConfig({ ssr: false, }) |
- ssr: true：動的コンポーネントのレンダリング（SSR）
- ssr: false：静的HTMLファイルの生成（SSG）
baseURLとprerenderの設定方法
- baseURL：アプリケーションのベースURLを指定（例:
https://example.com）。app.baseURLまたはruntimeConfig.app.baseURLで設定。 - prerender：事前にレンダリングするページを指定。
nuxt.config.tsに以下のように記述：
|
1 2 3 4 5 6 7 8 9 10 |
export default defineNuxtConfig({ app: { baseURL: '/my-static-site', }, modules: ['@nuxt/content'], prerender: { routes: ['/about', '/contact'], } }) |
ポイント：
prerender.routesに指定したページは、ビルド時に静的HTMLファイルとして生成されます。ただし、@nuxt/contentモジュールの導入は**SSG実装に必須ではないため、コンテンツ管理が必要でない場合は省略可能です。
VercelへのGit連携手順
Vercelとの統合には、プロジェクトをGitリポジトリに登録し、Vercelのプロジェクト設定で自動デプロイを行う必要があります。
リモートリポジトリ作成
- GitHubやGitLabなどのコードホストサービスにリポジトリを作成します。
- クロス参照を追加する（例:
git remote add origin [メールアドレス削除]:username/project.git）。 - ローカルの変更をリモートリポジトリにプッシュ。
Vercelプロジェクト紐付け
- Vercel公式サイトにログインし、新しいプロジェクトを作成します。
- Gitリポジトリを選択して「Import Project」をクリック。
- デプロイ用の環境変数（例:
APP_ENV=production）を設定。
補足：Vercelはプッシュ時に自動的にpreview deploymentを生成し、mainブランチへの変更は本番デプロイメントとして反映されます。
ホスティングサービス比較：
| ホスティング | 対応機能 | 価格 | 特徴 |
|---|---|---|---|
| Vercel | SSG/Edge Functions | 無料から有料 | グローバルCDN、自動スケーリング |
| Netlify | SSG/Serverless | 無料から有料 | ファンクションサポート、CI/CD統合 |
| Render | SSG/Static Sites | 有料 | カスタムドメイン対応 |
Preview Deploymentと本番デプロイの使い分け
Vercelでは、開発時の変更をテストする「preview deployment」と、本番環境に公開する「production build」があります。それぞれの特徴と最適化ポイントを確認します。
preview deploymentの特徴
- 目的：コード変更後の即時確認
- 自動生成：任意のブランチ（例:
feature/test）へのプッシュで実行 - URL構造：
https://test-slug.vercel.app
Production buildの最適化ポイント
- ビルド処理：
nuxt buildコマンドで生成される静的ファイルを圧縮 - 環境変数管理：本番用の
VITE_API_URL=https://api.example.comなど、環境に応じた設定を実装
| 項目 | Preview Deployment | Production Build |
|---|---|---|
| ビルド処理 | 速い（軽量） | より詳細な最適化 |
| 環境変数 | VITE_ENV=preview |
VITE_ENV=production |
| デプロイタイミング | 自動生成 | 手動またはCI/CDトリガー |
Edge Functionsによるパフォーマンス向上
VercelのEdge Functionsは、静的サイトにAPIロジックを組み込むことで、サーバーサイド処理を必要とせず高速なレスポンスを得られます。
APIルートの作成手順
server/api/ディレクトリを作成します。hello.tsファイルを作成し、以下のように記述：
|
1 2 3 4 |
export default defineEventHandler(event => { return { message: 'Hello from Edge Function!' }; }); |
- このAPIは、
/api/hello経由で呼び出せます。
クライアントサイド処理の代替案
- データフェッチ：Edge Functionsを使用してJSONデータを返却
- 認証処理：JWTトークンの発行や検証をEdge側で実装
補足：Edge FunctionsはVercel Edge Networkにグローバルでデプロイされ、リソースを効率的に活用できます。この機能は静的サイトでも動的な処理が可能であり、SEO改善とパフォーマンス向上の両立が可能です。
SSG導入によるSEOメリット
SSGはコンテンツを事前に生成するため、ページに含まれるメタ情報や構造化データが一貫性を持ちます。以下のような具体的なSEO対策が実現可能です：
- URL構造の最適化：静的HTMLファイルはパスに直接アクセス可能で、クローラーにとって読み取りやすい。
- メタタグの自動生成：
<head>内に動的に挿入されるSEO用タグ（title, descriptionなど）が各ページに正確に反映される。 - 構造化データサポート：JSON-LD形式で記事情報を追加することで、検索結果でのリッチスニペット表示を実現。
ポイント：SSGは動的なコンポーネントのレンダリング（SSR）と異なり、ページが完全にスタティックなため、クローラーによるアクセス制限がありません。これにより、SEO対策として理想的な構造を実装できます。
技術的設定の詳細解説
Nuxt 3でSSGを導入する際には、以下のような技術的なポイントに注意が必要です。
nuxt.config.tsの設定手順
ssr: falseでSSGモードを有効化します。baseURLを指定することで、デプロイ後のURL構造を管理できます。Vercelでは自動的にこの設定が反映されます。prerender.routesに特定のページを指定することで、静的HTMLファイル生成の制御が可能になります。
モジュール選定と導入
- @nuxt/content：ブログや記事管理用に有効ですが、SSG実装には必須ではありません。コンテンツがない場合は省略可能です。
- @nuxt/image：画像最適化を自動化し、SEOにも寄与します。
補足：モジュールの導入はプロジェクト規模に応じて柔軟に選択してください。過剰な依存関係はパフォーマンス低下を引き起こす可能性があります。
まとめと今後の展望
Nuxt 3とVercelの連携によって、静的サイト構築がより簡単にかつ効率的に実現できます。SSGの利点やEdge Functionsといった技術的な詳細まで解説し、導入時の注意点やホスティングサービス選定時の比較も行いました。今後は、CI/CDとの統合や、多言語サイト構築などの拡張機能にも挑戦してみましょう。