nextjs-developer

Next.js 開発者スキル

概要

このスキルでは、App Router（Next.js 15 以降）を使用して、本番環境に対応した Next.js アプリケーションを構築するための包括的な専門知識を提供します。Server Components、React 19 のサポート、データ取得のパターン、ルーティング、API ルート、キャッシュ、パフォーマンスの最適化について説明します。

主な機能

App Router のアーキテクチャ

• Server Components：最適なパフォーマンスを実現するデフォルトのレンダリングモデル
• Client Components："use client" ディレクティブを使ったインタラクティブなコンポーネント
• レイアウト：ルート間で状態を保持する共通 UI
• テンプレート：ナビゲーション時に新しいインスタンスを作成（状態は保持されません）
• ローディング UI：loading.tsx ファイルによるストリーミング
• エラー処理：error.tsx によるきめ細かなエラーバウンダリー

データ取得

• サーバー側での取得：Server Components からデータベースや API に直接アクセス
• キャッシュ戦略：デフォルトでの動的レンダリング、明示的なキャッシュ、段階的な再生成
• 再検証：時間ベースおよびオンデマンドでのキャッシュ無効化
• 並列取得：データ読み込みを最適化するパターン

ルーティングシステム

• ファイルベースルーティング：ファイル構造からルートを自動生成
• 動的ルート：[param] およびキャッチオールの [...slug] パターン
• ルートグループ：URL に影響を与えずに整理できる (folder)
• 並列ルート：複数のルートを同時にレンダリングする @slot
• インターセプトルート：(.)、(..)、(...) を使ったモーダルのパターン

Server Actions

• フォーム処理：action 属性によるプログレッシブエンハンスメント
• ミューテーション：サーバー側でのデータ変更
• 再検証：ミューテーション後にキャッシュを自動更新
• 楽観的更新：UI へ即座にフィードバックを返すパターン

実装パターン

プロジェクト構成

app/
├── layout.tsx          # Root layout
├── page.tsx            # Home page
├── globals.css         # Global styles
├── (auth)/             # Route group
│   ├── login/page.tsx
│   └── register/page.tsx
├── dashboard/
│   ├── layout.tsx      # Dashboard layout
│   ├── page.tsx        # Dashboard home
│   ├── loading.tsx     # Loading UI
│   ├── error.tsx       # Error boundary
│   └── [id]/page.tsx   # Dynamic route
├── api/
│   └── [route]/route.ts # API routes
└── components/         # Shared components

コンポーネントのパターン

Server Component（デフォルト）

// app/posts/page.tsx
async function PostsPage() {
  const posts = await db.posts.findMany()

  return (
    <ul>
      {posts.map(post => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  )
}

export default PostsPage

Client Component

// app/components/counter.tsx
"use client"

import { useState } from "react"

export function Counter() {
  const [count, setCount] = useState(0)

  return (
    <button onClick={() => setCount(c => c + 1)}>
      Count: {count}
    </button>
  )
}

データ取得のパターン

動的レンダリング（デフォルト）

// In Next.js 15+, fetch is uncached by default (implicit cache: 'no-store')
async function Page() {
  const data = await fetch('https://api.example.com/data')
  return <div>{data}</div>
}

静的生成（オプトイン）

// Explicitly opt into caching
async function Page() {
  const data = await fetch('https://api.example.com/data', {
    cache: 'force-cache',
  })
  return <div>{data}</div>
}

時間ベースの再検証

async function Page() {
  const data = await fetch('https://api.example.com/data', {
    next: { revalidate: 3600 }, // Revalidate every hour
  })
  return <div>{data}</div>
}

注：Next.js 15 では、クライアントルーターのキャッシュもデフォルトでキャッシュされなくなり、以前の 30 秒／5 分のデフォルト設定に代わりました。

Server Actions

// app/actions.ts
"use server"

import { revalidatePath } from "next/cache"

export async function createPost(formData: FormData) {
  const title = formData.get("title") as string

  await db.posts.create({ data: { title } })

  revalidatePath("/posts")
}

// app/posts/new/page.tsx
import { createPost } from "@/app/actions"

export default function NewPost() {
  return (
    <form action={createPost}>
      <input name="title" required />
      <button type="submit">Create</button>
    </form>
  )
}

部分的なプリレンダリング（PPR）

• PPR は、静的なシェルと動的なストリーミングを 1 回の HTTP リクエストで組み合わせます。
• Next.js 15 以降では本番環境で利用可能で、Next.js 14 では実験的な機能でした。
• next.config.js で experimental.ppr: 'incremental' を指定して段階的に導入するか、PPR を全面的に使用する場合は ppr: true を指定します。
• Suspense バウンダリーを使用して、静的なシェル内に動的な領域を定義します。
• ルートごとに PPR を導入すれば、アプリ全体を書き換えることなく、対象範囲を段階的に広げられます。

// app/page.tsx — static shell with dynamic hole
export const experimental_ppr = true

export default function Page() {
  return (
    <main>
      <StaticHeader />
      <Suspense fallback={<ProductSkeleton />}>
        <DynamicProductList />
      </Suspense>
    </main>
  )
}

Turbopack

• Turbopack は Next.js 15 の next dev と、Next.js 15.3 以降の next build で安定版です。
• 本番ビルドの処理では、8,298 件のテストスイートケースに合格しています。
• オプトインするには、next dev --turbopack と next build --turbopack を使用します。
• 開発サーバーの起動は Webpack より最大 10 倍高速になることがあります。
• 一部の Webpack ローダーやプラグインでは、引き続き移行作業が必要な場合があります。

next dev --turbopack
next build --turbopack

React 19 の機能

• React 19 は Next.js 15 以降の App Router プロジェクトで、デフォルトのランタイムとして使用されます。
• use() を使うと、レンダリング中に Promise やコンテキストを利用できます。
• Server Actions は安定版となり、実験的な機能ではなくなりました。
• useFormStatus() を使用すると、props のバケツリレーなしでフォームの状態を取得できます。
• useOptimistic() を使用すると、楽観的な UI 更新を実装できます。

import { use } from "react"
import { useFormStatus } from "react-dom"
import { useOptimistic } from "react"

function ProductName({ productPromise }: { productPromise: Promise<{ name: string }> }) {
  const product = use(productPromise)
  return <h1>{product.name}</h1>
}

after() によるレスポンス後の処理

• Next.js 15 では、レスポンス後の処理を行う after() が導入されました。
• レスポンス送信後のログ記録、分析、その他の重要度の低いタスクに使用します。
• next/server からインポートします。

import { after } from 'next/server'

after(() => {
  logAnalytics()
})

ナビゲーションフック（Next.js 15.4）

• useLinkStatus() を使うと、リンク内に読み込みインジケーターを表示できます。
• onNavigate を使うと、クライアント側のナビゲーションを追跡またはブロックできます。
• useLinkStatus() は next/link のクライアントフックで、{ pending } を返します。
• onNavigate は、SPA のナビゲーションにのみ適用される Link のプロパティです。

'use client'

import Link, { useLinkStatus } from 'next/link'

function LinkHint() {
  const { pending } = useLinkStatus()
  return <span aria-hidden>{pending ? 'Loading…' : null}</span>
}

export function Nav() {
  return (
    <nav>
      <Link href="/dashboard" prefetch={false} onNavigate={() => trackNavigation('/dashboard')}>
        Dashboard <LinkHint />
      </Link>
    </nav>
  )
}

next.config.js のパターン

• 実験的なフラグは必要な場合にのみ使用してください。Next.js 15 以降では、安定版になった機能がいくつかあります。
• ルートごとに PPR を導入するには、experimental.ppr: 'incremental' を使用してください。
• アプリ全体で PPR を有効にする場合にのみ、ppr: true を使用してください。
• Turbopack は CLI フラグで有効にします。next.config.js の設定項目ではありません。

// next.config.ts
import type { NextConfig } from 'next'

const nextConfig: NextConfig = {
  experimental: {
    ppr: 'incremental',
  },
  // For full PPR:
  // ppr: true,
}

export default nextConfig

{
  "scripts": {
    "dev": "next dev --turbopack",
    "build": "next build --turbopack"
  }
}

ベストプラクティス

パフォーマンス

• デフォルトではサーバーコンポーネントを使用してください
• 明示的にキャッシュが必要な場合を除き、動的レンダリングを優先してください
• 動的な部分を含む高速な静的シェルには、PPR を使用してください
• next/image で画像を最適化してください
• next/font でフォントを最適化してください
• Suspense 境界を使ってストリーミングを実装してください

セキュリティ

• Server Actions ですべての入力を検証してください
• シークレットには環境変数を使用してください
• 適切な認証パターンを実装してください
• ユーザー生成コンテンツをサニタイズしてください

コードの整理

• 可能な場合は、コンポーネントをルートと同じ場所に配置してください
• 論理的に整理するために、ルートグループを使用してください
• 適切なエラー境界を実装してください
• 再利用可能なレイアウトパターンを作成してください

スクリプト

このスキルには、scripts/ フォルダーに実行可能なスクリプトが含まれています。

開発

• dev-server.sh：ホットリロードを有効にして開発サーバーを起動します

  ./scripts/dev-server.sh [--port PORT] [--turbo]
  

• build-production.sh：最適化された本番ビルドを作成します

  ./scripts/build-production.sh [--analyze]
  

• analyze-bundle.sh：バンドルサイズと依存関係を分析します

  ./scripts/analyze-bundle.sh
  

コード生成

• create-page.sh：オプションのレイアウト、ローディング、エラーファイルとともに新しいページを生成します

  ./scripts/create-page.sh <page-path> [--layout] [--loading] [--error]
  

• create-api-route.sh：API ルートハンドラーを生成します

  ./scripts/create-api-route.sh <route-name> [--dynamic]
  

• create-component.sh：オプションのテストとともに React コンポーネントを生成します

  ./scripts/create-component.sh <name> [--client] [--test] [--dir DIR]
  

テスト

• setup-testing.sh：Jest と React Testing Library をセットアップします

  ./scripts/setup-testing.sh [--playwright]
  

• run-tests.sh：さまざまなオプションでテストを実行します

  ./scripts/run-tests.sh [--watch] [--coverage] [--file FILE]
  

テンプレート

このスキルには、templates/ フォルダーに本番環境対応のテンプレートが含まれています。

ページ

• page-server.tsx：非同期データ取得、メタデータ、Suspense ストリーミングを備えたサーバーコンポーネントのページ
• page-client.tsx：状態管理、フック、インタラクティブ機能を備えたクライアントコンポーネントのページ
• page-dynamic.tsx：params、generateStaticParams、generateMetadata を備えた動的ルートのページ

コンポーネント

• component-server.tsx：データ取得とコンポジションパターンを備えたサーバーコンポーネント
• component-client.tsx：フック、イベントハンドラー、localStorage を備えたクライアントコンポーネント

API とバックエンド

• api-route.ts：CRUD、検証（Zod）、認証、CORS を備えた完全な API ルートハンドラー
• server-action.ts：フォーム処理、検証、再検証を行う Server Actions
• middleware.ts：認証、レート制限、i18n、セキュリティヘッダーを備えたミドルウェア

インフラストラクチャ

• layout.tsx：ナビゲーション、フッター、メタデータ、フォントを備えたルート／ネストレイアウト
• page.test.tsx：ページ、コンポーネント、API ルート、Server Actions のテストパターン

リソース

このスキルには、resources/ フォルダーに詳細なリファレンスガイドが含まれています。

• app-router-patterns.md：App Router の包括的なパターンと例
• data-fetching.md：データ取得の戦略とキャッシュ
• server-components.md：サーバーコンポーネントとクライアントコンポーネントのガイド
• routing-reference.md：ルーティングシステムの完全なリファレンス
• performance-optimization.md：パフォーマンス最適化のベストプラクティス
• api-routes.md：API ルートハンドラーとパターン
• testing-patterns.md：Next.js アプリのテスト戦略

---

専門分野：Next.js App Router 開発 バージョン：2.0 最終更新日：2026 年 5 月