AWS AmplifyからCloudflare Pagesへの移行 — Next.js APIサーバーの月額$23→$0化

npm install --save-dev @opennextjs/cloudflare wrangler

// open-next.config.ts
import { defineCloudflareConfig } from "@opennextjs/cloudflare";

export default defineCloudflareConfig({});

/** @type {import('next').NextConfig} */
const nextConfig = {
  // output: 'standalone', を削除
  outputFileTracingIncludes: {
    '/api/**/*': ['./data/**/*', './lib/**/*'],
  },
}

module.exports = nextConfig

{
  "name": "my-app",
  "pages_build_output_dir": ".open-next/assets",
  "compatibility_date": "2026-04-06",
  "compatibility_flags": ["nodejs_compat"]
}

{
  "scripts": {
    "build:cf": "npx @opennextjs/cloudflare build",
    "preview": "npx @opennextjs/cloudflare build && wrangler dev",
    "deploy": "npx @opennextjs/cloudflare build && wrangler deploy"
  }
}

The options.ALPNProtocols option is not implemented

// app/lib/elasticsearch.ts（変更後）
const getConfig = () => ({
  node: process.env.ES_HOST ? `https://${process.env.ES_HOST}` : '',
  auth: {
    username: process.env.ES_USER || '',
    password: process.env.ES_PASSWORD || ''
  }
})

function createClient() {
  return {
    async search(params: { index: string; body: Record<string, unknown> }) {
      const config = getConfig()
      const url = `${config.node}/${params.index}/_search`
      const headers: Record<string, string> = {
        'Content-Type': 'application/json',
      }
      if (config.auth.username) {
        headers['Authorization'] = 'Basic ' +
          btoa(`${config.auth.username}:${config.auth.password}`)
      }
      const res = await fetch(url, {
        method: 'POST',
        headers,
        body: JSON.stringify(params.body),
      })
      if (!res.ok) {
        const text = await res.text()
        throw new Error(`Elasticsearch error ${res.status}: ${text}`)
      }
      return await res.json()
    }
  }
}

let client: ReturnType<typeof createClient> | null = null

export function getClient() {
  if (!client) {
    client = createClient()
  }
  return client
}

# ビルド
npm run build:cf

# ローカルテスト（.dev.varsに環境変数を設定）
wrangler dev

ES_HOST=your-elasticsearch-host.com
ES_USER=your-username
ES_PASSWORD=your-password

# Pagesプロジェクト作成
npx wrangler pages project create my-app --production-branch main

# ビルド出力をデプロイ（_worker.jsを含める）
cp .open-next/worker.js .open-next/_worker.js
npx wrangler pages deploy .open-next --project-name my-app --branch main

# 環境変数（シークレット）設定
npx wrangler pages secret put ES_HOST --project-name my-app
npx wrangler pages secret put ES_USER --project-name my-app
npx wrangler pages secret put ES_PASSWORD --project-name my-app

# Cloudflare APIでカスタムドメイン追加
curl -X POST \
  "https://api.cloudflare.com/client/v4/accounts/{account_id}/pages/projects/my-app/domains" \
  -H "Authorization: Bearer {api_token}" \
  -H "Content-Type: application/json" \
  -d '{"name":"my-app.aws.ldas.jp"}'

my-app.aws.ldas.jp → my-app.pages.dev

Node.js middleware is not currently supported.
Consider switching to Edge Middleware.