Claude Code で Next.js × Cloudflare Workers の本番運用を乗り越える — バンドルサイズ危機からエッジキャッシュ設計まで、実際に詰まった場所と解決策を全公開

// cache-worker.js（エッジレイヤーのキャッシュ制御）
 
const DEPLOY_VERSION = 'v20260421' // キャッシュ無効化時に変更
 
export default {
  async fetch(request, env, ctx) {
    const url = new URL(request.url)
    const cookieHeader = request.headers.get('Cookie') ?? ''
 
    // パーソナライズドコンテンツが必要なユーザーはキャッシュバイパス
    const isPersonalized = 
      cookieHeader.includes('premium_token=') ||    // Pro/Premium 会員
      cookieHeader.includes('article_purchases=')    // 記事単体購入済み
 
    if (isPersonalized) {
      // キャッシュをバイパスしてオリジンへ直接リクエスト
      return env.ASSETS.fetch(request)
    }
 
    // 非パーソナライズリクエストはキャッシュを利用
    const cacheKey = `${DEPLOY_VERSION}:${url.pathname}${url.search}`
    const cache = caches.default
 
    const cached = await cache.match(cacheKey)
    if (cached) {
      // キャッシュヒット: X-Cache-Status ヘッダーを追加して返す
      const response = new Response(cached.body, cached)
      response.headers.set('X-Cache-Status', 'HIT')
      return response
    }
 
    // キャッシュミス: オリジンから取得してキャッシュに保存
    const originResponse = await env.ASSETS.fetch(request)
    
    if (originResponse.ok && request.method === 'GET') {
      const responseToCache = originResponse.clone()
      ctx.waitUntil(cache.put(cacheKey, responseToCache))
    }
 
    const response = originResponse.clone()
    response.headers.set('X-Cache-Status', 'MISS')
    return response
  }
}

// package.json
{
  "scripts": {
    "build": "next build",
    "prebuild": "node scripts/generate-content.mjs"  // ← これが動いていなかった
  }
}

// package.json（修正版）
{
  "scripts": {
    "build": "node scripts/generate-content.mjs && next build",
    "prebuild": "node scripts/generate-content.mjs"
  }
}

# ❌ 壊れていた構造
[build]
command = "npm run build"
 
name = "claudelab"          # ← [build] の後ろにトップレベルキーを書いてはいけない
compatibility_date = "2026-04-01"
 
# ✅ 正しい構造
name = "claudelab"
compatibility_date = "2026-04-01"
compatibility_flags = ["nodejs_compat"]
account_id = "your-account-id"
main = ".open-next/worker.js"
 
[build]
command = "npm run build"
 
[[assets]]
directory = ".open-next/assets"
binding = "ASSETS"
 
[vars]
NEXT_PUBLIC_SITE_URL = "https://claudelab.net"

// src/app/api/route.ts に以下を追加
export async function GET() { ... }

# Claude Code が提案した事前確認スクリプト
#\!/bin/bash
# check-bundle-size.sh
 
echo "=== ビルド前チェック ==="
 
# articles.json のサイズ確認
JSON_SIZE=$(du -sh src/generated/articles.json 2>/dev/null | cut -f1)
echo "articles.json: $JSON_SIZE"
 
# 50MB を超えたら警告
JSON_BYTES=$(wc -c < src/generated/articles.json 2>/dev/null || echo 0)
if [ "$JSON_BYTES" -gt 52428800 ]; then
  echo "⚠️  WARNING: articles.json が 50MB を超えています。Content Split を確認してください。"
  exit 1
fi
 
# public/content の HTML ファイル数確認
HTML_COUNT=$(find public/content -name "*.html" 2>/dev/null | wc -l)
echo "HTMLファイル数: $HTML_COUNT"
 
echo "✅ チェック完了"

# キャッシュ状態の確認
curl -I https://claudelab.net/articles/claude-code/your-article \
  -H "Cookie: " \
  | grep -E "X-Cache|CF-Cache|Cache-Control|Age"
 
# 会員向けキャッシュバイパスの確認（premium_token がある場合）
curl -I https://claudelab.net/articles/claude-code/your-article \
  -H "Cookie: premium_token=test_value" \
  | grep -E "X-Cache|CF-Cache|Cache-Control"

// ❌ これが原因でビルドが落ちる
// next.config.js
module.exports = {
  experimental: {
    optimizeCss: true,
  }
}
 
// ✅ Cloudflare Workers では無効化
module.exports = {
  experimental: {
    optimizeCss: false,
  }
}

// ❌ 自ホストへの fetch は Workers で禁止
const res = await fetch('https://claudelab.net/content/articles/ja/...')
 
// ✅ env.ASSETS バインディングを使う
const res = await env.ASSETS.fetch(new Request('https://dummy.internal/content/...'))

// src/lib/content.ts（キャッシュ付き版）
 
const contentCache = new Map<string, string>()
 
export async function getArticleContent(
  locale: string,
  category: string,
  slug: string
): Promise<string | null> {
  const cacheKey = `${locale}/${category}/${slug}`
  
  // インメモリキャッシュを確認（Worker インスタンスのライフタイム中有効）
  if (contentCache.has(cacheKey)) {
    return contentCache.get(cacheKey)\!
  }
 
  try {
    const { env } = await getCloudflareContext()
    const assetPath = `/content/articles/${cacheKey}.html`
    const response = await env.ASSETS.fetch(
      new Request(`https://dummy.internal${assetPath}`)
    )
 
    if (\!response.ok) return null
    const html = await response.text()
    
    // キャッシュに保存
    contentCache.set(cacheKey, html)
    return html
  } catch (error) {
    console.error('[getArticleContent] error:', error)
    return null
  }
}

export async function getArticleContent(
  locale: string,
  category: string,
  slug: string
): Promise<string | null> {
  try {
    const { env } = await getCloudflareContext()
    
    // ローカル開発環境では env.ASSETS が undefined の場合がある
    if (\!env?.ASSETS) {
      console.warn('[getArticleContent] env.ASSETS not available (local dev?)')
      return null
    }
 
    const response = await env.ASSETS.fetch(
      new Request(`https://dummy.internal/content/articles/${locale}/${category}/${slug}.html`)
    )
 
    if (\!response.ok) return null
    return response.text()
  } catch {
    return null
  }
}