Nuxt.js 3で静的サイト生成(SSG)を行う前に必要な知識と手順

Nuxt.js 3で静的サイト生成を始める前に

Nuxt.js 3を活用して静的サイト生成(SSG)を行う場合、SSGとSPAの選択理由や環境確認が不可欠です。SSGはサーバーサイドレンダリング(SSR)に比べて初期ロード速度が速く、SEO対策にも有利なため、情報系サイトやブログなどページ数が多いプロジェクトに向いています。一方でSPAモードはインタラクティブ性を重視するアプリ向けです。
本記事では、Nuxt.js 3の特徴と静的サイト生成(SSG)のメリットを踏まえ、具体的な手順を解説します。読者の皆さんはnuxt.config.tsでの設定やnpm run generateコマンドの実行フローといった技術的なポイントを効率的に理解できるよう構成しています。

nuxt.config.tsでのgenerate設定方法

Nuxt.js 3で静的サイト生成を行うには、nuxt.config.tsにgenerateオプションを正しく記述することが不可欠です。このセクションでは、基本構文の解説とルート指定の最適化について詳しくご紹介します。

基本構文の解説

静的サイト生成を有効にするには、generateオプションに以下のように設定します。

オプションの詳細説明

• dir: 出力先ディレクトリ（デフォルトはdist）
• fallback: trueにすると、動的ルートが存在しない場合でも404ページを表示可能になります。
• routes: 手動で生成する静的ページのパスを指定できます（例: /about, /contact）。

blockquote
静的サイト生成時に不要なルートを指定すると、ビルド時間が増える可能性があるため、必要なページのみを絞り込むことが重要です。

ルート指定の最適化

手動でroutesオプションを指定する場合、以下のように自動生成と併用できます。

最適化方法の比較表

blockquote
asyncRoutes()は、動的ルートが多いため実行時間がかかる場合に注意が必要です。

npm run generateコマンドの実行フロー

静的サイトを実際に生成するには、npm run generateコマンドを実行します。このセクションでは、ビルドプロセスのタイミングと静的ファイル生成の検証方法について解説します。

ビルドプロセスのタイミング

npm run generateのフローは以下の通りです：

1. コンパイルフェーズ: VueコンポーネントやCSSがバンドルされます。
2. プリレンダリング: 指定されたルートを順番に生成し、HTMLファイルを作成します。
3. 出力: ファイルがdist/ディレクトリに配置され、静的サイトの準備ができあます。

blockquote
エラーが発生した場合、nuxt generate --debugで詳細なログを確認できます。また、--no-cleanオプションで既存ファイルを削除せずに上書きすることも可能です。

静的ファイル生成の検証方法

生成されたファイルはdist/フォルダ内に配置され、以下のような構造になります：

静的サイトのデプロイ先選定と手順

静的サイト生成後のデプロイ先選定は、プロジェクトの用途や規模に応じて重要です。ここでは、Firebase Hostingでの設定例とAWS S3との連携方法を解説します。

Firebase Hostingでの設定例

1. Firebase CLIで初期化:
   bash
firebase init hosting

2. firebase.jsonに設定:
   json
{
"hosting": {
"public": "dist",
"ignore": ["**/.*", "**/node_modules/**"]
}
}

3. デプロイ実行:
   bash
firebase deploy --only hosting

blockquote
Firebase Hostingは無料枠が用意されており、小規模な静的サイトに最適です。

AWS S3との連携方法

1. AWS CLIでバケット作成:
   bash
aws s3api create-bucket --bucket my-static-site

2. dist/フォルダをアップロード:
   bash
aws s3 sync dist/ s3://my-static-site/

3. CloudFrontでCDN設定（オプション）:

4. S3バケットにCloudFrontを追加し、グローバルなアクセスを高速化します。

blockquote
AWS S3は大規模なサイトや高トラフィック向けに適しており、S3 + CloudFrontの組み合わせでコスト効率が良いです。

SSGとSPAモードの違いと選び方

Nuxt.js 3ではSSG（静的生成）とSPA（単一ページアプリケーション）の2つのモードを自由に選べます。ここではパフォーマンス比較とSEO対策の観点から使い分け方を解説します。

パフォーマンス比較

静的サイト生成(SSG)とSPAモードの主な違いは以下の通りです：

blockquote
ページ数が多いサイトやブログでは、SSGの初期ロード速度がメリットになります。

SEO対策の観点

SEOにおけるSSGとSPAモードの特性は以下の通りです：

• SSG: 静的ファイルに直接メタ情報やコンテンツが含まれるため、SEOに強く、Googleクローラーにも親しみやすいです。
• SPA: クライアントサイドレンダリングでHTMLが動的に生成されるため、SEO対策にはSSRまたはプリレンダリングが必要です。

blockquote
ブログやECサイトなど検索エンジンの影響を受ける場合は、SSGモードがおすすめです。一方で、アプリのようなインタラクティブ性を重視するプロジェクトではSPAモードも有効です。

Nuxt.js公式推奨プラットフォームとの連携

Nuxt.jsは静的サイト生成においてVercelやNetlifyなどのデプロイ先が公式に推奨されています。以下にそれぞれの特徴と設定方法を解説します。

Vercelでのデプロイ手順

1. プロジェクトルートにvercel.jsonを作成:
   json
{
"build": {
"command": "npm run generate",
"dir": "."
},
"outputDirectory": "dist"
}

2. Vercel CLIでデプロイ:
   bash
vercel deploy

blockquote
VercelはNuxt.jsと連携して自動的にSSGの最適化を行い、高速なデプロイが可能です。

Netlifyでのデプロイ手順

1. プロジェクトルートにnetlify.tomlを作成:
   toml
[build]
command = "npm run generate"
publish = "dist"

2. Netlify CLIでデプロイ:
   bash
netlify deploy

blockquote
NetlifyはCI/CDと連携して、変更を自動的に反映する機能が豊富です。

生成されたファイル構造の確認手順

静的サイトが正しく生成されているか確認するには、distフォルダーの階層解析とHTML/CSS/JSファイルの検証が必要です。

distフォルダーの階層解析

dist/ディレクトリ内は以下のような構造になります。

• HTMLファイルは各ページの静的なコンテンツです。
• CSS/JSは_nuxt/フォルダにまとめられており、ロード効率を高めています。

blockquote
イメージとして、about/index.htmlには「Aboutページ」のHTMLが含まれており、_nuxt/app.jsで動的処理が行えます。

HTML/CSS/JSファイルの検証

生成されたHTMLを確認する際は、以下の点に注目してください：

1. SEOタグ: <meta name="description" content="...">が正しく記述されているか。
2. CSS・JSのパス: _nuxt/styles.cssなどの相対パスが正しいか。
3. 動的処理: app.jsでコンポーネントが動作するかブラウザで確認。

• 静的サイト生成(SSG)は、初期ロード速度とSEO対策に優れており、情報系サイトやブログなどに向いています。
• nuxt.config.tsのgenerate設定で出力先やルートを指定し、npm run generateコマンドで静的ファイルを生成します。
• 生成されたファイルはdist/フォルダに配置され、VercelやNetlifyなどNuxt.js公式推奨プラットフォームにデプロイ可能です。

記事を参考にNuxt.jsプロジェクトで静的サイト生成を試してみましょう！