Nuxt.jsを始めよう

本番環境に対応したアプリケーションをモダンなワークフローで構築したいVue開発者にとって、Nuxt 4は最速の道筋を提供します。Nuxtは、サーバーサイドレンダリング、ハイブリッドレンダリング、ファイルベースルーティング、そしてNode、静的ホスト、サーバーレス、エッジ環境全体で動作する統一されたデプロイメントモデルを備えたVue 3をベースに構築されています。

この初心者向けチュートリアルでは、Vue 3、Vite、TypeScript、composables、Nitroといった最新のデフォルト設定を使用して、初めてのNuxt 4アプリケーションを作成する手順を説明します。

Nuxt 4とは何か、なぜ使うべきか?

Nuxt 4は、Nuxtフレームワークの現行メジャーリリースであり、2025年後半における新しいVueアプリケーションに推奨される選択肢です。Vue 3、Vite、Nitroサーバーエンジンを使用して、高速な開発体験と柔軟な本番アーキテクチャを提供します。

通常のVueアプリとは異なり、Nuxt 4は標準でSSRを提供し、ルーティングを自動的に管理し、サーバーとクライアントの両方のコンテキストでデータ取得を処理し、予測可能で規約駆動のプロジェクト構造を備えています。

デフォルトでVue 3 + Vite

Nuxt 4は、開発サーバーとビルドパイプラインにViteを使用します。これにより、ほぼ瞬時のホットモジュールリプレースメント、高速なコールドスタート、高度に最適化された出力バンドルが得られます。

Vue 3 Composition APIとTypeScriptファーストの設計により、強力な型推論、より良いコード構成、予測可能なコンポーネント動作が提供されます。

セットアップ不要のTypeScript

TypeScriptサポートは組み込まれています。Nuxtは、プロジェクトディレクトリ、APIルート、ミドルウェア、コンポーネントに基づいて自動的に型を生成します。保存した瞬間から、IDEがプロジェクト全体を理解します。

初めてのNuxt 4プロジェクトのセットアップ

npm create nuxt@latestによるインストール

モダンなNuxt 4 CLIを使用して新しいプロジェクトをスキャフォールドします:

npm create nuxt@latest my-app
cd my-app
npm install
npm run dev

これにより、TypeScript、Vite、Nitro、自動インポートされるcomposablesがすぐに使えるNuxt 4プロジェクトがセットアップされます。

ディレクトリ構造の概要

新しいNuxt 4プロジェクトには以下が含まれます:

• pages/ — ファイルベースルーティング
• components/ — 自動インポートされるコンポーネント
• composables/ — 自動インポート付きの再利用可能なロジック
• server/api/ — Nitroによって駆動されるサーバーエンドポイント
• public/ — 静的アセット
• nuxt.config.ts — TypeScriptファーストの設定

この構造により、セットアップのオーバーヘッドが排除され、すべてが予測可能になります。

コアコンセプト: Pages、Layouts、Composables、自動インポート

Nuxt 4のファイルベースルーティング

pages/内にVueファイルを追加すると、Nuxtが自動的にルートを作成します:

<!-- pages/products/[id].vue -->
<script setup lang="ts">
const route = useRoute()
const id = route.params.id
</script>

<template>
  <h1>Product {{ id }}</h1>
</template>

動的ルートパラメータは角括弧を使用します。

共有UIのためのLayouts

Layoutsを使用すると、ページの周りに共有ラッパーを配置できます:

<!-- layouts/default.vue -->
<template>
  <AppHeader />
  <main><slot /></main>
  <AppFooter />
</template>

ページは自動的にデフォルトレイアウトを使用します。definePageMetaを使用してレイアウトを切り替えることができます。

Composablesと自動インポート

composables/内のComposablesはどこでも自動インポートされます:

// composables/useCounter.ts
export const useCounter = () => {
  const count = useState('count', () => 0)
  const inc = () => count.value++
  return { count, inc }
}

import文も定型コードも不要 — Nuxtがすべて処理します。

Nuxt 4でのデータ取得

SSR対応リクエストのためのuseFetch

useFetchは、サーバーサイドのデータ読み込みとクライアントハイドレーションを処理します:

<script setup lang="ts">
const { data: posts } = await useFetch('/api/posts')
</script>

これにより、サーバーとクライアント間での二重取得が回避され、Nitroとシームレスに連携します。

Nitro経由のAPIルート

server/api/にサーバーエンドポイントを作成します:

// server/api/posts.get.ts
export default defineEventHandler(async () => {
  const posts = await $fetch('https://jsonplaceholder.typicode.com/posts')
  return posts.slice(0, 5)
})

Nitroは、これらのエンドポイントをNode、静的、サーバーレス、またはエッジデプロイメント向けに自動的に最適化します。

カスタムロジックのためのuseAsyncData

より細かい制御が必要な場合:

<script setup lang="ts">
const { data } = await useAsyncData('posts', () =>
  $fetch('/api/posts', { query: { limit: 5 } })
)
</script>

Piniaによる状態管理

アプリケーションレベルの状態には、Nuxt 4はPiniaを使用します:

npm install @pinia/nuxt

有効化します:

export default defineNuxtConfig({
  modules: ['@pinia/nuxt']
})

ストアを作成します:

// stores/user.ts
export const useUserStore = defineStore('user', () => {
  const profile = ref(null)
  async function load() {
    profile.value = await $fetch('/api/user')
  }
  return { profile, load }
})

PiniaはNuxtの自動インポートとSSR動作と直接統合されます。

Nuxt 4のレンダリングモード

デフォルトでサーバーサイドレンダリング

Nuxt 4は、SEOとパフォーマンスのためにサーバー上でページをレンダリングします。ルートごとにレンダリングを調整できます:

export default defineNuxtConfig({
  routeRules: {
    '/': { prerender: true },
    '/admin/**': { ssr: false },
    '/blog/**': { isr: 3600 }
  }
})

これにより、SSR、事前レンダリングされた静的ページ、動的なクライアント専用セクションを組み合わせたハイブリッドアプリが可能になります。

静的生成とハイブリッドデプロイメント

必要に応じて静的出力を生成します:

npm run generate

マーケティングページを事前レンダリングし、ダッシュボードを動的に保ち、すべてをNitro経由で実行できます。

Nuxt 4アプリケーションのデプロイ

本番環境用のビルド

npm run build

Nuxtは、サーバーコード、クライアントアセット、すべての主要なホスティングプラットフォーム向けのプリセットを含む.output/ディレクトリを出力します。

プラットフォーム非依存のデプロイメント

以下にデプロイできます:

• Nodeサーバー
• 静的ホスト
• サーバーレスプラットフォーム(AWS、Vercel、Netlify)
• エッジネットワーク(Cloudflare Workers、Vercel Edge)

Nitroが自動的に適切なプリセットを選択します。

まとめ

今日Nuxt.jsを始めるということは、Nuxt 4を使用することを意味します。
デフォルトでのSSR、ハイブリッドレンダリング、自動インポート、composables、そしてデプロイメントを支えるNitroにより、Nuxt 4は高速で、モダンで、保守可能なVueアプリケーションを構築するために必要なすべてを提供します。

以下から始めましょう:

npm create nuxt@latest

—これだけで、すでに適切な基盤の上に立っています。

よくある質問

Gain Debugging Superpowers

Unleash the power of session replay to reproduce bugs, track slowdowns and uncover frustrations in your app. Get complete visibility into your frontend with OpenReplay — the most advanced open-source session replay tool for developers. Check our GitHub repo and join the thousands of developers in our community.