Nuxt 3 のインストールから Netlify 静的サイトデプロイまで完全ガイド

2026年7月2日

Contents

1 1. Nuxt 3 のインストールとプロジェクト作成
2 2. pnpm のインストールとバージョン管理
- 2.1 このセッションで扱う内容
- 2.2 2‑1. corepack による pnpm の有効化（Node 18+ 推奨）
3 3. 静的サイト生成（SSG）と Incremental Static Regeneration（ISR）の設定
4 4. Netlify 用設定ファイルとデプロイ手順
5 5. GitHub 連携と Deploy Preview の活用
6 6. パフォーマンス最適化と SEO 強化
7 まとめ

スポンサードリンク

1. Nuxt 3 のインストールとプロジェクト作成

このセクションで扱う内容

Node.js とパッケージマネージャのバージョン確認
推奨される pnpm によるプロジェクト生成手順
VS Code で快適に開発できる拡張機能

1‑1. Node.js バージョンの確認

Node.js は v18 以上 が公式サポート対象です。ターミナルで以下を実行し、バージョンが要件を満たすことを確認してください。

node -v   # 例: v18.20.0

1 2	node -v # 例: v18.20.0

1‑2. パッケージマネージャの選択

npm でも動作はしますが、pnpm がハードリンクベースのストレージを採用しているため、インストール時間・ディスク使用量の面で有利です。実測では同一依存関係が多いプロジェクト間で 約30 % のインストール高速化 が報告されています（※GitHub Actions のキャッシュレポートを参照）。

推奨コマンド例

# npm で作成する場合
npm create nuxt@latest my-nuxt-app
cd my-nuxt-app
npm install

# pnpm で作成する場合（推奨）
pnpm create nuxt@latest my-nuxt-app
cd my-nuxt-app
pnpm i

# npm で作成する場合

npm create nuxt@latest my-nuxt-app

cd my-nuxt-app

npm install

# pnpm で作成する場合（推奨）

pnpm create nuxt@latest my-nuxt-app

cd my-nuxt-app

pnpm i

ポイント
create nuxt@latest は Nuxt 3 の公式スキャフォールディングツールです。プロジェクト作成時に --ts オプションを付与すると TypeScript が自動的に有効になります。

1‑3. VS Code 拡張機能（開発体験向上）

拡張機能	主な効果
Volar	Vue 3/TypeScript の型情報をリアルタイムで提供
Nuxt 3 Snippets	`definePageMeta` など Nuxt 固有 API のコード補完
ESLint (recommended)	コーディング規約の自動チェック

2. pnpm のインストールとバージョン管理

このセッションで扱う内容

corepack を利用した推奨インストール方法
固定バージョンに依存しないアップデート手順

2‑1. corepack による pnpm の有効化（Node 18+ 推奨）

# Corepack が同梱されていれば以下だけで OK
corepack enable

# 任意で最新版を取得したい場合
corepack prepare pnpm@latest --activate

# Corepack が同梱されていれば以下だけで OK

corepack enable

# 任意で最新版を取得したい場合

corepack prepare pnpm@latest --activate

メリット：corepack は Node に組み込まれたパッケージマネージャー管理ツールで、プロジェクトごとに pnpm のバージョンを自動的に合わせられるため、固定バージョンのハードコーディングが不要です。
代替手段：グローバルインストールしたい場合は npm i -g pnpm@latest としても問題ありません。

3. 静的サイト生成（SSG）と Incremental Static Regeneration（ISR）の設定

Nuxt 2 の target: 'static' は廃止され、Nuxt 3 では output: 'static' と nuxi generate コマンドが公式の静的サイト生成手段です。

このセクションで扱う内容

SSG を有効にする nuxt.config.ts の記述
ISR（再生成）を Nitro の static.ttl で実装
Netlify 用 CDN 配信設定 (assetPrefix)

3‑1. Nuxt 3 の静的サイトモード

// nuxt.config.ts
export default defineNuxtConfig({
  // ビルド結果を static ディレクトリへ出力（SSG）
  output: 'static',

  // 静的生成時にプリレンダーするページ（手動列挙または自動クロール）
  prerender: {
    routes: ['/','/about','/blog'],
    crawlLinks: true,
  },

  // ISR 用設定：TTL (seconds) を指定するとバックグラウンドで再生成
  nitro: {
    preset: 'netlify',
    static: {
      ttl: 60,               // 1 分ごとに自動リビルド（バックエンド側はキャッシュヘッダーが必要）
      fallback: true,       // 未生成ページは最初のアクセスでサーバーレス関数が走る
    },
  },

  // Netlify CDN 経由で配信したい静的アセットのプレフィックス例
  app: {
    // 環境変数 `CDN_URL` が設定されていればそれを利用し、未設定時はデフォルト（空文字）に戻す
    cdnURL: process.env.CDN_URL || '',
  },

  // 必要なモジュール例（画像最適化など）
  modules: ['@nuxt/image'],
});

// nuxt.config.ts

export default defineNuxtConfig({

// ビルド結果を static ディレクトリへ出力（SSG）

output: 'static',

// 静的生成時にプリレンダーするページ（手動列挙または自動クロール）

prerender: {

routes: ['/','/about','/blog'],

crawlLinks: true,

// ISR 用設定：TTL (seconds) を指定するとバックグラウンドで再生成

nitro: {

preset: 'netlify',

static: {

ttl: 60, // 1 分ごとに自動リビルド（バックエンド側はキャッシュヘッダーが必要）

fallback: true, // 未生成ページは最初のアクセスでサーバーレス関数が走る

// Netlify CDN 経由で配信したい静的アセットのプレフィックス例

app: {

// 環境変数 `CDN_URL` が設定されていればそれを利用し、未設定時はデフォルト（空文字）に戻す

cdnURL: process.env.CDN_URL || '',

// 必要なモジュール例（画像最適化など）

modules: ['@nuxt/image'],

});

`assetPrefix` の具体例（Netlify CDN 使用時）

// nuxt.config.ts の続き
export default defineNuxtConfig({
  app: {
    // Netlify が自動的に提供するサブドメイン例
    baseURL: '/',
    cdnURL: 'https://my-site.netlify.app',   // ← CDN URL をここに設定
  },
});

// nuxt.config.ts の続き

export default defineNuxtConfig({

app: {

// Netlify が自動的に提供するサブドメイン例

baseURL: '/',

cdnURL: 'https://my-site.netlify.app', // ← CDN URL をここに設定

});

cdnURL（または assetPrefix と同等の概念）は、ビルド時に静的リソースへのパスを上書きし、エッジロケーションから高速配信できるようにします。
Netlify の Asset CDN はデフォルトで有効なので、上記設定だけで画像や JS/CSS が自動的にキャッシュされます。

3‑2. ISR 実装例（ページコンポーネント）

&lt;!-- pages/blog/[slug].vue --&gt;
&lt;script setup lang=&quot;ts&quot;&gt;
import { useAsyncData } from '#app'

const route = useRoute()
const slug = route.params.slug as string

// ページがキャッシュ切れの場合はバックエンド API から取得
const { data: post } = await useAsyncData(`post-${slug}`, () =&gt;
  $fetch(`/api/posts/${slug}`)
, {
  // Nitro の fallback が true のときにだけ実行される設定
  server: false,
  lazy: true,
})
&lt;/script&gt;

&lt;template&gt;
  &lt;div v-if=&quot;post&quot;&gt;
    &lt;h1&gt;{{ post.title }}&lt;/h1&gt;
    &lt;article v-html=&quot;post.content&quot; /&gt;
  &lt;/div&gt;
  &lt;NuxtLoadingIndicator v-else /&gt;
&lt;/template&gt;

import { useAsyncData } from '#app'

const route = useRoute()

const slug = route.params.slug as string

// ページがキャッシュ切れの場合はバックエンド API から取得

const { data: post } = await useAsyncData(`post-${slug}`, () =>

$fetch(`/api/posts/${slug}`)

, {

// Nitro の fallback が true のときにだけ実行される設定

server: false,

lazy: true,

})

</script>

<h1>{{ post.title }}</h1>

</div>

</template>

useAsyncData はクライアント側でデータ取得を遅延実行し、SSR 時にキャッシュが無い場合は Netlify Functions（以下参照）へフォールバックします。
TTL が切れたら Nitro が自動的に再ビルドをトリガーし、次回のリクエストで最新データが配信されます。

4. Netlify 用設定ファイルとデプロイ手順

このセクションで扱う内容

netlify.toml の正しい記述例（ビルドコマンド・公開ディレクトリ）
SPA フォールバックや API リダイレクトの設定
assetPrefix と CDN の関係性

4‑1. netlify.toml 完全サンプル

# netlify.toml
[build]
  # Nuxt 3 の静的生成は nuxi generate が公式コマンド
  command = &quot;npx nuxi generate&quot;
  publish = &quot;dist&quot;

[[redirects]]
  # Netlify Functions（/api 以下）へのプロキシ設定
  from = &quot;/api/*&quot;
  to = &quot;/.netlify/functions/:splat&quot;
  status = 200

[[redirects]]
  # SPA の深い URL が直接アクセスされたときに index.html にフォールバック
  from = &quot;/*&quot;
  to = &quot;/index.html&quot;
  status = 200

# 環境変数（必要ならここで定義）
[context.production.environment]
  NODE_VERSION = &quot;18&quot;
  CDN_URL = &quot;https://my-site.netlify.app&quot;   # assetPrefix 用

# netlify.toml

[build]

# Nuxt 3 の静的生成は nuxi generate が公式コマンド

command = "npx nuxi generate"

publish = "dist"

[[redirects]]

# Netlify Functions（/api 以下）へのプロキシ設定

from = "/api/*"

to = "/.netlify/functions/:splat"

status = 200

[[redirects]]

# SPA の深い URL が直接アクセスされたときに index.html にフォールバック

from = "/*"

to = "/index.html"

status = 200

# 環境変数（必要ならここで定義）

[context.production.environment]

NODE_VERSION = "18"

CDN_URL = "https://my-site.netlify.app" # assetPrefix 用

ビルドコマンドは nuxt build && nuxt export ではなく、npx nuxi generate が公式です（内部的に nuxt build → 静的エクスポートを実行します）。
publish = "dist" は Nuxt 3 のデフォルト出力先です。

4‑2. Netlify 側での assetPrefix 設定

Netlify のビルド環境変数 CDN_URL を nuxt.config.ts の app.cdnURL にマッピングするだけで、全静的リソースが CDN 経由で配信されます。

[context.production.environment]
  CDN_URL = &quot;https://my-site.netlify.app&quot;

[context.production.environment]

CDN_URL = "https://my-site.netlify.app"

5. GitHub 連携と Deploy Preview の活用

このセクションで扱う内容

GitHub リポジトリを Netlify に接続する手順
Pull Request ごとのプレビュー URL の取得方法
環境変数の安全な管理

5‑1. 手順概要

手順	内容
1	GitHub にリポジトリを作成し、ローカルコードを `git push`
2	Netlify ダッシュボード → 「New site from Git」 → プロバイダーに GitHub を選択
3	ビルド設定が自動検出されない場合は手入力・Build command: `npx nuxi generate` ・Publish directory: `dist`
4	「Deploy contexts」→ `Pull request previews` を有効化
5	必要な環境変数（例：`API_BASE_URL`、`CDN_URL`）を UI から追加

5‑2. Deploy Preview の確認

PR 作成 → Netlify が自動でビルドし、コメントに https://<branch>--your-site.netlify.app のプレビュー URL を投稿。
プレビューは本番環境と同一のビルド設定・CDN 配信が行われるため、ステークホルダーへの実機感覚での確認が可能です。

6. パフォーマンス最適化と SEO 強化

このセクションで扱う内容

@nuxt/image と Netlify の画像最適化を組み合わせた手法
CDN 配信 (assetPrefix) による静的リソース高速化
Lighthouse を用いた定量的評価と構造化データの実装例

6‑1. 画像最適化と CDN 設定

// nuxt.config.ts（画像モジュール + CDN）
export default defineNuxtConfig({
  modules: ['@nuxt/image'],
  image: {
    // Netlify の Image CDN を利用（自動 WebP/AVIF 変換）
    provider: 'netlify',
    presets: {
      hero: { modifiers: { width: 1200, format: 'webp' } },
      thumbnail: { modifiers: { width: 300, format: 'webp' } },
    },
  },

  // CDN 配信設定（上記の assetPrefix と同等）
  app: {
    cdnURL: process.env.CDN_URL || '',
  },
});

// nuxt.config.ts（画像モジュール + CDN）

export default defineNuxtConfig({

modules: ['@nuxt/image'],

image: {

// Netlify の Image CDN を利用（自動 WebP/AVIF 変換）

provider: 'netlify',

presets: {

hero: { modifiers: { width: 1200, format: 'webp' } },

thumbnail: { modifiers: { width: 300, format: 'webp' } },

// CDN 配信設定（上記の assetPrefix と同等）

app: {

cdnURL: process.env.CDN_URL || '',

});

&lt;!-- コンポーネント例 --&gt;
&lt;template&gt;
  &lt;NuxtImg src=&quot;/images/hero.jpg&quot; preset=&quot;hero&quot; alt=&quot;ヒーロー画像&quot; /&gt;
&lt;/template&gt;

</template>

効果：Netlify のエッジサーバーで自動的に画像を最適化・圧縮し、LCP（Largest Contentful Paint）を 1 秒以下に削減できるケースが多く報告されています【参考: Netlify Blog, 2024】。

6‑2. Lighthouse による測定フロー

Deploy Preview の URL を Chrome DevTools → Lighthouse タブで計測
主な指標と改善ポイントをメモ（例：FCP > 1.5 s → 画像遅延ロードの導入）
必要に応じて nuxt.config.ts の head セクションで meta タグ・構造化データを追加

6‑3. SEO 基本設定と JSON‑LD

// nuxt.config.ts（SEO ヘッド情報）
export default defineNuxtConfig({
  app: {
    head: {
      titleTemplate: '%s | My Nuxt Site',
      meta: [
        { name: 'description', content: 'Nuxt 3 と Netlify を組み合わせた高速静的サイトです。' },
        { property: 'og:type', content: 'website' },
        { property: 'og:title', content: 'My Nuxt Site' },
        { property: 'og:url', content: 'https://my-site.netlify.app' },
        // Twitter Card 例
        { name: 'twitter:card', content: 'summary_large_image' },
      ],
      link: [{ rel: 'icon', href: '/favicon.ico' }],
    },
  },
});

// nuxt.config.ts（SEO ヘッド情報）

export default defineNuxtConfig({

app: {

head: {

titleTemplate: '%s | My Nuxt Site',

meta: [

{ name: 'description', content: 'Nuxt 3 と Netlify を組み合わせた高速静的サイトです。' },

{ property: 'og:type', content: 'website' },

{ property: 'og:title', content: 'My Nuxt Site' },

{ property: 'og:url', content: 'https://my-site.netlify.app' },

// Twitter Card 例

{ name: 'twitter:card', content: 'summary_large_image' },

link: [{ rel: 'icon', href: '/favicon.ico' }],

});

&lt;!-- pages/_app.vue（構造化データ） --&gt;
&lt;script setup lang=&quot;ts&quot;&gt;
const jsonLd = {
  &quot;@context&quot;: &quot;https://schema.org&quot;,
  &quot;@type&quot;: &quot;WebSite&quot;,
  &quot;name&quot;: &quot;My Nuxt Site&quot;,
  &quot;url&quot;: &quot;https://my-site.netlify.app&quot;
}
&lt;/script&gt;

&lt;template&gt;
  &lt;Head&gt;
    &lt;script type=&quot;application/ld+json&quot;&gt;
      {{ JSON.stringify(jsonLd) }}
    &lt;/script&gt;
  &lt;/Head&gt;
  &lt;NuxtPage /&gt;
&lt;/template&gt;

const jsonLd = {

"@context": "https://schema.org",

"@type": "WebSite",

"name": "My Nuxt Site",

"url": "https://my-site.netlify.app"

}

</script>

<Head>

</script>

</Head>

</template>

ポイント：titleTemplate に %s を入れるとページごとのタイトルが自動的に組み込まれ、検索エンジンへのインデックス品質が向上します。
JSON‑LD は Google が推奨する構造化データ形式で、サイト全体の認識を高めます。

まとめ

Node 18+ と pnpm (corepack 推奨) を導入し、最新バージョン管理を自動化。
pnpm create nuxt@latest でプロジェクトを生成し、VS Code の拡張機能で開発効率を最大化。
静的サイトは output: 'static' と nuxi generate を用い、ISR は nitro.static.ttl で実装。
Netlify デプロイは netlify.toml にビルドコマンド・SPA フォールバック・API リダイレクトを記載し、assetPrefix（＝app.cdnURL）で CDN 配信を有効化。
GitHub と連携すれば Deploy Preview が自動生成され、PR ごとに本番環境同等のプレビューが確認できる。
画像最適化・Lighthouse 計測・構造化データでパフォーマンスと SEO を総合的に強化すれば、ユーザー体験と検索エンジン評価の両方を高めた品質の高い静的サイトが完成します。

これらの手順を順に実施すれば、最新の Nuxt 3 と Netlify のベストプラクティスに沿った高速・安全な静的サイト を数分で構築できるはずです。ぜひ試してみてください！

スポンサードリンク

-Nuxt.js

comment コメントをキャンセル

: Nuxt.js

Nuxt 3 を Vercel にデプロイする最新手順（2026年版）

本稿では、Node 20+pnpm 環境で Nuxt 3 プロジェクトを作成し、Vercel 用に nitro preset を設定する方法から、GitHub 連携・CI/CD 設定、Serverless と Edge Functions の選択基準、環境変数管理、ビルドエラー対処法まで実務的に解説します。2026 年版の最新ベストプラクティスで高速かつ安全なデプロイを実現できます。

: Nuxt.js

Nuxt3 のSSR・SSG・SPA 選び方と設定手順ガイド

この記事では、Nuxtのレンダリングモード比較と、SSRを有効にする手順、NitroやruntimeConfigの設定、デプロイのポイントを詳しく紹介します。

: Nuxt.js

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

Nuxt.js 3での静的サイト生成(SSG)について、SSGとSPAの選択理由や環境確認から具体的な手順まで詳しく解説しています。nuxt.config.tsの設定方法やnpm run generateコマンドの実行フローも紹介。

: Nuxt.js

Nuxt3にTailwind CSS v4を導入する手順と設定方法

Nuxt3プロジェクトでTailwind CSS v4を導入する際の初期設定からカスタマイズまでの手順、およびNuxt UIとの併用時の注意点を解説します。

: Nuxt.js

Vue Router と Nuxt 3 のルーティング比較と移行ガイド

Vue Router と Nuxt 3 のルーティング方式の違いと、プロジェクト移行のポイントを分かりやすくまとめました。

Spring BootでリアクティブREST API構築ガイド

Next.js eコマーステンプレート比較 2026年版 – パフォーマンス・価格・SEO徹底分析

Nuxt 3 のインストールから Netlify 静的サイトデプロイまで完全ガイド

1. Nuxt 3 のインストールとプロジェクト作成

このセクションで扱う内容

1‑1. Node.js バージョンの確認

1‑2. パッケージマネージャの選択

推奨コマンド例

1‑3. VS Code 拡張機能（開発体験向上）

2. pnpm のインストールとバージョン管理

このセッションで扱う内容

2‑1. corepack による pnpm の有効化（Node 18+ 推奨）

3. 静的サイト生成（SSG）と Incremental Static Regeneration（ISR）の設定

このセクションで扱う内容

3‑1. Nuxt 3 の静的サイトモード

assetPrefix の具体例（Netlify CDN 使用時）

3‑2. ISR 実装例（ページコンポーネント）

4. Netlify 用設定ファイルとデプロイ手順

このセクションで扱う内容

4‑1. netlify.toml 完全サンプル

4‑2. Netlify 側での assetPrefix 設定

5. GitHub 連携と Deploy Preview の活用

このセクションで扱う内容

5‑1. 手順概要

5‑2. Deploy Preview の確認

6. パフォーマンス最適化と SEO 強化

このセクションで扱う内容

6‑1. 画像最適化と CDN 設定

6‑2. Lighthouse による測定フロー

6‑3. SEO 基本設定と JSON‑LD

まとめ

Nuxt 3 のインストールから Netlify 静的サイトデプロイまで完全ガイド

1. Nuxt 3 のインストールとプロジェクト作成

1‑3. VS Code 拡張機能（開発体験向上）

2‑1. corepack による pnpm の有効化（Node 18+ 推奨）

3‑1. Nuxt 3 の静的サイトモード

`assetPrefix` の具体例（Netlify CDN 使用時）