第8章: エコシステムと開発ツール — Turbopack, Turborepo, AI SDK

// next.config.ts — Turbopackの本番ビルドでの使用
const nextConfig = {
  // Next.js 15以降、開発サーバーはデフォルトでTurbopack
  // 本番ビルドでもTurbopackを使用する場合:
  // next build --turbopack
}

// package.jsonのscripts例
// {
//   "dev": "next dev --turbopack",     ← デフォルトで有効
//   "build": "next build --turbopack", ← 本番ビルドでも使用可能
// }

// turbo.json — Turborepoの設定
{
  "tasks": {
    "build": {
      "dependsOn": ["^build"],    // 依存パッケージのbuildを先に実行
      "outputs": [".next/**", "dist/**"],  // キャッシュ対象の出力
      "env": ["DATABASE_URL"]     // キャッシュキーに含める環境変数
    },
    "test": {
      "dependsOn": ["build"],     // buildの後にtest実行
      "inputs": ["src/**", "test/**"]  // これらのファイルが変わった時のみ再実行
    },
    "lint": {
      "dependsOn": []             // 依存なし（並列実行可能）
    },
    "dev": {
      "cache": false,             // 開発サーバーはキャッシュしない
      "persistent": true          // 長時間実行タスク
    }
  }
}

# Vercel Remote Cachingの有効化
npx turbo login      # Vercelアカウントに認証
npx turbo link       # リポジトリをVercelプロジェクトにリンク

# CIでの使用（GitHub Actions例）
# env:
#   TURBO_TOKEN: $TURBO_TOKEN_FROM_SECRETS
#   TURBO_TEAM: my-team

# キャッシュヒット時の表示例:
# Tasks:    3 successful, 3 total
# Cached:   3 cached, 3 total       ← 全タスクがキャッシュから復元
# Time:     412ms                    ← 本来5分かかるビルドが0.4秒

# mainブランチとの差分に影響されるパッケージのみビルド
turbo build --affected

# 特定のブランチとの比較
turbo test --affected --filter="...since=origin/develop"

# モノレポ構成例
# packages/
#   ui/         ← 変更あり → ビルド実行
#   utils/      ← 変更なし → スキップ
#   config/     ← 変更なし → スキップ
# apps/
#   web/        ← uiに依存 → ビルド実行
#   admin/      ← 変更なし → スキップ

// vitest.config.ts — Next.js用のVitest設定
import { defineConfig } from 'vitest/config'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  test: {
    environment: 'jsdom',
    setupFiles: ['./vitest.setup.ts'],
    include: ['**/*.test.{ts,tsx}'],
  },
})

// playwright.config.ts — Next.js用のPlaywright設定
import { defineConfig, devices } from '@playwright/test'

export default defineConfig({
  testDir: './e2e',
  webServer: {
    command: 'npm run dev',
    port: 3000,
    reuseExistingServer: !process.env.CI,
  },
  projects: [
    { name: 'chromium', use: { ...devices['Desktop Chrome'] } },
    { name: 'mobile', use: { ...devices['iPhone 15'] } },
  ],
})

// app/api/chat/route.ts — Server Actionでのストリーミングチャット
import { openai } from '@ai-sdk/openai'
import { streamText } from 'ai'

export async function POST(req: Request) {
  const { messages } = await req.json()

  const result = streamText({
    model: openai('gpt-4o'),
    messages,
    tools: {
      // ツール呼び出し: AIが必要に応じて実行
      getWeather: {
        description: '指定された都市の天気を取得',
        parameters: z.object({
          city: z.string().describe('都市名'),
        }),
        execute: async ({ city }) => {
          return { temperature: 22, condition: '晴れ' }
        },
      },
    },
  })

  return result.toDataStreamResponse()
}

// app/chat/page.tsx — クライアント側のチャットUI
'use client'
import { useChat } from '@ai-sdk/react'

export default function ChatPage() {
  const { messages, input, handleInputChange, handleSubmit } = useChat()

  return (
    <div>
      {messages.map((m) => (
        <div key={m.id}>
          <strong>{m.role}:</strong> {m.content}
        </div>
      ))}
      <form onSubmit={handleSubmit}>
        <input value={input} onChange={handleInputChange} />
        <button type="submit">送信</button>
      </form>
    </div>
  )
}