【設定・環境構築】OpenNext でNext.js SSGサイトをCloudflare Workersにデプロイする完全ガイド

npm install @opennextjs/cloudflare
npm install -D wrangler
# esbuildの明示的インストールが必要
npm install -D esbuild

import { defineCloudflareConfig } from '@opennextjs/cloudflare';

export default defineCloudflareConfig({});

#:schema node_modules/wrangler/config-schema.json
name = "kt-tech-blog"
main = ".open-next/worker.js"
compatibility_date = "2025-03-14"
compatibility_flags = ["nodejs_compat"]

[assets]
directory = ".open-next/assets"
binding = "ASSETS"

# KVはISRキャッシュに使用
[[kv_namespaces]]
binding = "NEXT_CACHE_WORKERS_KV"
id = "your-kv-namespace-id"

{
  "scripts": {
    "build": "opennextjs-cloudflare",
    "dev": "next dev",
    "deploy": "opennextjs-cloudflare && wrangler deploy",
    "preview": "opennextjs-cloudflare && wrangler dev"
  }
}

// src/app/blogs/[blogId]/page.tsx
export async function generateStaticParams() {
  const allBlogs = await getAllBlogs(); // Notion APIから全記事取得
  return allBlogs.map((blog) => ({
    blogId: blog.id,
  }));
}

// next.config.js
module.exports = {
  experimental: {
    workerThreads: false,
    cpus: 1, // ビルドワーカー数を1に制限
  },
};

// libs/notion.ts
const delay = (ms: number) => new Promise(resolve => setTimeout(resolve, ms));

export async function getAllBlogs(): Promise<Blog[]> {
  const pages = [];
  let cursor: string | undefined;
  
  do {
    const response = await notion.dataSources.query({
      data_source_id: DATABASE_ID,
      start_cursor: cursor,
    });
    pages.push(...response.results);
    cursor = response.next_cursor ?? undefined;
    await delay(350); // 350ms間隔でAPI呼び出し
  } while (cursor);
  
  return pages.map(pageToBlog);
}

# .github/workflows/deploy.yml
name: Deploy to Cloudflare Workers

on:
  push:
    branches: [main]
  workflow_dispatch:

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      
      - uses: actions/setup-node@v4
        with:
          node-version: '20'
          cache: 'npm'
      
      - run: npm ci
      
      - name: Build with OpenNext
        run: npx opennextjs-cloudflare
        env:
          NOTION_TOKEN: ${{ secrets.NOTION_TOKEN }}
          NOTION_DATABASE_ID: ${{ secrets.NOTION_DATABASE_ID }}
      
      - name: Deploy to Cloudflare Workers
        run: npx wrangler deploy
        env:
          CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}
          CLOUDFLARE_ACCOUNT_ID: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}

# Worker Secrets に環境変数を設定
# 引数なしで実行し、プロンプトに値を貼る（履歴に残さない）
npx wrangler secret put NOTION_TOKEN
npx wrangler secret put NOTION_DATABASE_ID

Error 1102: Worker exceeded CPU time limit