Contents
Nuxt 3で静的サイト生成を始める前に
Nuxt 3で静的サイト生成を実施するには、環境構築と基本的な知識の確認が不可欠です。Node.js（18以降）とnpmのインストールが必須となります。公式ドキュメントでは「nuxi init」コマンドを使用してプロジェクトを作成する流れが紹介されており、これによりパッケージ管理やルーティング設定が自動で構築されます。準備を怠るとエラーが発生するため、事前にバージョン確認を行うことが推奨されます。
- Node.jsのインストール方法: https://nodejs.org/ja/download/
- バージョン確認コマンド:
node -v/npm -v
nuxi initコマンドでプロジェクトを初期化する
Nuxt 3のプロジェクト作成は「nuxi init」コマンド1つで完了します。この手順では、新規ディレクトリを作成し、テンプレートファイル群が自動生成されます。
初期設定時のオプションについて
実行時に以下のようにオプションを指定することで、プロジェクトの構造や使用する機能をカスタマイズ可能です。
- プロジェクトフォルダ作成:
nuxi init nuxt3-static - カレントディレクトリ移動:
cd nuxt3-static - 必要なパッケージインストール:
npm install
注意: 初期化時に「TypeScript」「Vuetify」などの追加機能を含めるかどうかを聞かれるため、静的サイト生成には最低限の設定で十分です。
nuxt.config.tsでのstaticモード設定
Nuxt 3ではgenerateオプションを有効化することで、静的サイト生成モードに切り替えられます。この機能は、nuxt.config.tsファイル内で定義されるgenerateセクションを通じて構成されます。静的モードの実質的な動作は、プロジェクト内にあるすべてのルートをあらかじめHTMLに変換し、サーバー側での処理を省くことで高速なレスポンスとSEO対策に寄与します。
静的生成モードの有効化方法
以下のようにgenerateセクションを追加し、出力先や動的ルートの生成条件を指定します。
|
1 2 3 4 5 6 7 8 9 |
export default defineNuxtConfig({ modules: ['@nuxt/content'], generate: { dir: 'dist', // 出力先ディレクトリ（デフォルトは'dist'） fallback: false, // 404ページの生成を無効化 routes: () => import('./routes').then(r => r.routes), // 動的ルートの定義ファイル読み込み } }) |
補足: 必要に応じて
@nuxt/contentや@nuxtjs/robotsなどのモジュールを追加し、SEO対策を行えるようにするのも効果的です。
npm run generateで静的サイトを生成する
プロジェクト初期化と設定が完了したら、実際の静的ファイル生成に移ります。ここではgenerateコマンドの基本的な使い方とオプションについて説明します。
生成時のオプション引数の使い方
以下のようにコマンドを実行することで、指定されたディレクトリにHTML・CSS・JavaScriptがまとめて出力されます。
|
1 2 |
npm run generate |
出力結果例:
dist/index.html、dist/blog/hello-world/index.htmlなどの静的ファイルが生成される（pages/ディレクトリの構造と一致する）
--modern: モダンなブラウザ向けの最適化を有効にする（オプション）--no-clean: 既存のdistフォルダを上書きしないように指定する（オプション）
動的ルートの静的生成対策
Nuxt 3では動的なページが存在する場合、pages/ディレクトリ内のファイル構造と<NuxtLink>コンポーネントの使用方法によって静的に生成されるかが決まります。
NuxtLinkコンポーネントの活用方法
以下の手順で動的ルートを確実に静的に生成します。
pages/ディレクトリ内に動的ルートファイルを作成:pages/blog/[slug].vue<NuxtLink>を使用して該当ページへのリンクを配置する（例：<NuxtLink to="/blog/hello-world">記事</NuxtLink>）nuxt.config.tsでgenerate.routes()を使って動的ルートを定義（例:routes.jsファイルで記事一覧を読み込む）
補足: 動的ルートの生成条件は、
<NuxtLink>が含むURLパスと一致する必要があります。また、スラッグ形式（例:/blog/hello-world）も静的に生成可能です。
distフォルダの確認とデプロイ準備
最終ステップとして、生成されたdistフォルダの中身を確認し、実際のホスティング環境にアップロードする手順を紹介します。
静的ファイルの構造理解
dist/ディレクトリには以下のようにHTML・CSS・JavaScriptが格納されます。Nuxt 3ではassets/ディレクトリは自動生成されず、静的出力先はdist/に限定されます。
|
1 2 3 4 5 6 7 8 |
dist/ ├── index.html ├── about/ │ └── index.html └── blog/ ├── hello-world/ │ └── index.html |
デプロイ手順の例（S3 + CloudFrontの場合）:
dist/をローカルPCに保存- AWSコンソールでS3バケットを作成し、ファイルをアップロード
- CloudFrontディストリビューションを作成し、S3バケットをオリジンとして設定
まとめ
本記事では、Nuxt 3を利用して静的サイトを生成する際のステップバイステップガイドを解説しました。以下に要点を箇条書きで整理します。
- プロジェクト初期化:
nuxi initコマンドで構築し、必要パッケージをインストール - 静的モード有効化:
nuxt.config.tsでgenerateオプションを設定 - 生成実行:
npm run generateでHTMLファイル群を出力 - 動的ルート対策:
pages/[slug].vueと<NuxtLink>を組み合わせて定義 - デプロイ準備:
dist/フォルダをホスティングサービスにアップロード
記事内の手順に従ってプロジェクトを作成し、npm run generateで静的サイトを生成してみましょう。公式ドキュメントも併せて参照してください。