Nuxt.js 3.5で静的サイトを構築する手順と実環境構築ガイド

2026年7月8日

もっとスキルを活かしたいエンジニアへ

スポンサードリンク

働き方から選べる

無料で使えて良質な案件の情報収集ができるサービス

エンジニアの世界では、「いつでも動ける状態を作っておけ」とよく言われます。
技術やポートフォリオがあっても、自分に合う案件情報を日常的に見れていないと、いざ動こうと思った時に比較や判断が難しくなってしまいます。
普段から案件情報が集まる環境を作っておくと、良い案件が出た時にすぐ動きやすくなりますよ。
筆者自身も、メガベンチャー勤務時代に年収1,500万円を超えた経験があります。振り返ると、技術だけでなく「どんな案件や働き方があるか」を日頃から見ていたことが、キャリアの選択肢を広げるきっかけになりました。
このブログを読んでくれた方に感謝を込めて、実際に使っている情報収集サービスを紹介します。

フルリモート・週3日・高単価、どんな条件も妥協したくないなら

フリーランスボードに無料会員登録する

利用者10万人以上。業界最大規模45万件の案件。AIマッチ機能や無料の相場情報が人気。

年収800万円以上のキャリアアップ・ハイクラス正社員を視野に入れているなら

Beyond Careerに無料相談する

内定獲得率90%以上。紹介先企業とは役員クラスのコネクションがある安心と信頼できるエージェント。

Contents

1 Nuxt.js 3.5 静的サイト生成手順 | 実環境構築ガイド（2023年7月版）
2 Nuxt.js 3.5での静的サイト生成の概要
3 プロジェクト構築前の準備
- 3.1 Node.jsとnpm/yarnのバージョン確認
- 3.2 nuxt createコマンドでの初期設定
4 nuxt.config.tsでの静的生成設定
- 4.1 targetとgenerateプロパティの基本設定
- 4.2 ページごとの出力制御用ルート定義
5 asyncData・fetch APIの静的生成対応
- 5.1 データフェッチ処理の実行タイミング
- 5.2 キャッシュ制御とビルド時処理の最適化
6 CI/CD連携例: VercelとAzure
7 実装時のポイントとトラブルシューティング

スポンサードリンク

Nuxt.js 3.5 静的サイト生成手順 | 実環境構築ガイド（2023年7月版）

Nuxt.js 3.5で静的サイトを構築する際の具体的な実装手順を解説します。2023年7月時点での最新バージョンに特化した設定方法と、プロジェクト構築からCI/CD連携までの一連のフローについて、エンジニア向けに丁寧に説明します。

Nuxt.js 3.5での静的サイト生成の概要

Nuxt.js 3.5における静的サイト生成（SSG）は、クライアントサイドで動的なコンテンツを事前にレンダリングし、HTMLファイルとして出力する仕組みです。これにより、SEO対策やパフォーマンス向上が実現できます。

本記事では、2023年7月時点の最新バージョンに合わせた構築フローを解説します。特に nuxt.config.tsでの設定方法や、動的ルート生成の制御など、実務で必要な技術ポイントをカバーします。

プロジェクト構築前の準備

静的サイト生成環境を整えるには、いくつかの前提条件があります。以下に必要な手順を確認してください。

Node.jsとnpm/yarnのバージョン確認

Nuxt.js 3.5はNode.js v18以上 を推奨しています。node -vコマンドで現在のバージョンを確認し、必要に応じてアップグレードしてください。

推奨: Node.js v18.x, npm v9.x
互換性のないバージョンを使用すると、静的生成処理中にエラーが発生する可能性があります

nuxt createコマンドでの初期設定

プロジェクト作成時にgenerateモードを有効化するため、以下のオプションを指定します。

npx nuxt@latest create my-project --template nuxt-ts --generate

1 2	npx nuxt@latest create my-project --template nuxt-ts --generate

--template: テンプレート選択（nuxt-tsはTypeScript推奨）
--generate: 初期設定時に静的生成モードを有効化

作成後、cd my-project && npm installで依存関係をインストールしてください。

nuxt.config.tsでの静的生成設定

プロジェクト構築後は、nuxt.config.tsで静的サイト生成の詳細な設定を行います。ここではtargetとgenerateプロパティの基本設定と、ページごとの出力制御方法を説明します。

targetとgenerateプロパティの基本設定

export default defineNuxtConfig({
  target: 'static', // 静的サイト生成モードを有効化
  generate: {
    dir: 'dist' // 出力先ディレクトリ（デフォルト）
  }
})

export default defineNuxtConfig({

target: 'static', // 静的サイト生成モードを有効化

generate: {

dir: 'dist' // 出力先ディレクトリ（デフォルト）

}

})

target: 'static': Nuxt.jsが静的生成モードとして動作するように指定
generate.dir: ビルド出力先をカスタマイズ

注意: 動的レンダリングの設定は本記事の対象外です。静的サイト構築に特化した記述とします。

ページごとの出力制御用ルート定義

動的なページを静的に生成する際、generate.routesで指定したURLのみが処理されます。

export default defineNuxtConfig({
  generate: {
    routes: [
      '/about',
      '/contact'
    ]
  }
})

export default defineNuxtConfig({

generate: {

routes: [

'/about',

'/contact'

]

}

})

静的ルートのみを対象にします（動的なルートはparamsで定義）
出力不要なページはここに記載しないことで省略可能です

asyncData・fetch APIの静的生成対応

静的サイト生成中でも、外部データを読み込む必要があります。以下にasyncDataとfetch APIの使用方法について解説します。

データフェッチ処理の実行タイミング

Nuxt.jsではasyncDataやfetchはビルド時に実行されます。これにより、静的ページ生成時に必要なデータを取得できます。

&lt;script setup&gt;
import { useFetch } from 'vue'

const { data } = await useFetch('https://api.example.com/data')
&lt;/script&gt;

import { useFetch } from 'vue'

const { data } = await useFetch('https://api.example.com/data')

</script>

useFetchはNuxt 3.5の標準APIで、ビルド時とクライアントサイド双方での実行が可能
外部APIへの依存がある場合は、適切なエラーハンドリングを記述

キャッシュ制御とビルド時処理の最適化

大量のデータフェッチを行う場合、キャッシュや並列処理でパフォーマンスを向上させましょう。

asyncDataはページごとに実行されるため、データ取得に時間がかかる場合はキャッシュ戦略の導入を検討
以下の設定で、データフェッチ時の最大並列数を制限

export default defineNuxtConfig({
  app: {
    head: {
      title: '静的サイト生成サンプル'
    }
  },
  build: {
    concurrencyLimit: 5 // ビルド時並列処理の上限（デフォルトは10）
  }
})

export default defineNuxtConfig({

app: {

head: {

title: '静的サイト生成サンプル'

}

build: {

concurrencyLimit: 5 // ビルド時並列処理の上限（デフォルトは10）

}

})

CI/CD連携例: VercelとAzure

構築後は、CI/CDによって静的サイトをホスティングサーバーに自動で配備します。代表的なVercelとAzureでの設定方法を解説します。

Vercelにおけるbuild設定ファイル作成

Vercelのvercel.jsonに以下を記述し、Nuxtの生成結果を配備させます。

{
  &quot;version&quot;: 2,
  &quot;builds&quot;: [
    {
      &quot;src&quot;: &quot;nuxt.config.ts&quot;,
      &quot;use&quot;: &quot;@nuxtjs/vercel&quot;
    }
  ],
  &quot;outputDirectory&quot;: &quot;dist&quot;
}

{

"version": 2,

"builds": [

{

"src": "nuxt.config.ts",

"use": "@nuxtjs/vercel"

}

"outputDirectory": "dist"

}

outputDirectoryはnuxt.config.tsで指定した出力先ディレクトリと一致させる必要があります
ビルド時に自動でnpm run generateが実行されます

Azure Pipelineでの静的サイトデプロイフロー

Azure Pipelineでは、以下のような手順で静的サイトを配備します。

npm install && npm run generateを実行してHTML出力
出力結果をAzure Storageにアップロード
静的ホスティングの設定を変更（Storage URLへのリダイレクト）
Azure Pipelineファイル(azure-pipelines.yml)は以下のように記述

trigger:
  - main

pool:
  vmImage: 'ubuntu-latest'

steps:
- script: |
    npm install
    npm run generate
  displayName: 'Build and Generate Static Site'

- task: AzureCLI@2
  inputs:
    azureSubscription: 'your-subscription'
    scriptType: 'bash'
    scriptPath: 'deploy.sh'

trigger:

- main

pool:

vmImage: 'ubuntu-latest'

steps:

- script: |

npm install

npm run generate

displayName: 'Build and Generate Static Site'

- task: AzureCLI@2

inputs:

azureSubscription: 'your-subscription'

scriptType: 'bash'

scriptPath: 'deploy.sh'

deploy.shではStorageへのアップロード処理を実装します

deploy.shの具体例（Azure Storageへのアップロード）

#!/bin/bash
az storage blob upload-batch \
  --source dist \
  --destination &quot;my-container/static-site&quot; \
  --account-name &quot;your-storage-account&quot; \
  --auth-mode login

#!/bin/bash

az storage blob upload-batch \

--source dist \

--destination "my-container/static-site" \

--account-name "your-storage-account" \

--auth-mode login

実装時のポイントとトラブルシューティング

静的サイト生成中に発生しがちな問題や、パフォーマンス最適化のコツについて解説します。

静的生成時のパフォーマンス最適化

大量ページ生成時に処理が遅くなる場合: generate.routesで必要最小限のルートだけを指定
データフェッチが長時間かかる場合: キャッシュAPIや非同期処理で最適化
画像リソースが多い場合: 画像圧縮ツール（例：imageoptimizer）を使用

設定項目	推奨値	対応内容
`concurrencyLimit`	5〜10	ビルド時並列処理の上限設定
`generate.interval`	100ms	静的ルート生成時の間隔調整

動的ルート生成における注意点

動的なルート（例: /user/123）を静的に生成する場合は、paramsを使用してルートを定義します。

export default defineNuxtConfig({
  generate: {
    routes() {
      return [
        '/users/1',
        '/users/2',
        // ...
      ]
    }
  }
})

export default defineNuxtConfig({

generate: {

routes() {

return [

'/users/1',

'/users/2',

// ...

]

}

})

動的ルートが多い場合、generate.routes()内で動的なリスト生成が可能
静的生成時におけるメモリ制限対策が必要な場合は、async関数で非同期処理に切り替え

async関数によるメモリ最適化例

export default defineNuxtConfig({
  generate: {
    routes: async () =&gt; {
      const users = await fetchUsers(); // データフェッチを非同期で実行
      return users.map(user =&gt; `/users/${user.id}`);
    }
  }
})

export default defineNuxtConfig({

generate: {

routes: async () => {

const users = await fetchUsers(); // データフェッチを非同期で実行

return users.map(user => `/users/${user.id}`);

}

})

非同期処理により、メモリ使用量を抑えることができる

このように、Nuxt.js 3.5では静的サイト構築が簡潔かつ柔軟に行えます。記事内で紹介した手順を参考に、実環境での検証を進めましょう。

スポンサードリンク

もっとスキルを活かしたいエンジニアへ

スポンサードリンク

働き方から選べる

無料で使えて良質な案件の情報収集ができるサービス

フルリモート・週3日・高単価、どんな条件も妥協したくないなら

フリーランスボードに無料会員登録する

利用者10万人以上。業界最大規模45万件の案件。AIマッチ機能や無料の相場情報が人気。

年収800万円以上のキャリアアップ・ハイクラス正社員を視野に入れているなら

Beyond Careerに無料相談する

内定獲得率90%以上。紹介先企業とは役員クラスのコネクションがある安心と信頼できるエージェント。

-Nuxt.js

comment コメントをキャンセル

: Nuxt.js

NuxtでTypeScriptを導入する方法とベストプラクティス

NuxtプロジェクトにTypeScriptを導入する具体的手順と、設定・コンポーネント実装・CI/CDでの型チェック方法をまとめました。

: Nuxt.js

Nuxt.jsをVercelにデプロイする2026年最新手順

2026年版のNuxt.jsプロジェクトをVercelにデプロイする際の手順。自動検出機能やNitroとの連携オプション、ISR設定などを解説。

: Nuxt.js

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

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

: Nuxt.js

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

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

: Nuxt.js

Nuxt3でSSR導入とSEO最適化の完全ガイド

Nuxt3でSSRを導入し、検索エンジンが即座にコンテンツを取得できるようにする具体的な設定と最適化手法を紹介します。

NestJSとPrismaの連携方法｜初心者向けガイド

Nuxt の標準 meta 管理と最新 SEO プラグイン徹底比較