20260501fri

Published: at 15:00

20260501fri

目標: 5日（1日30分）でCloudflare Pagesに公開する

現状サマリー

ページ / 機能状態
/ トップ✅ 完成
/about🔲 骨格のみ（<main> コンテンツなし）
/works🔲 骨格のみ（<main> コンテンツなし）
/[category] 記事一覧✅ Supabase連携済み
/[category]/[slug] 記事詳細✅ 実装済み
/admin/* 記事管理✅ Supabase連携済み
PostsSection（トップの最新記事）🔲 ダミーデータのまま

前提: Supabase（SSR）を使用しているため静的エクスポート不可。
Cloudflareには @opennextjs/cloudflare を使ってデプロイする。

Day 1 — aboutページのコンテンツ実装

ファイル: app/about/page.tsx

Day 2 — worksページのコンテンツ実装

ファイル: app/works/page.tsx

Day 3 — PostsSectionのSupabase連携

ファイル: app/components/PostsSection.tsx

Day 4 — Cloudflare Pagesデプロイ準備

ゴール: ローカルでCloudflare向けビルドが通る状態にする

インストール

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

設定ファイルの作成

wrangler.jsonc（プロジェクトルートに作成）:

{
  "name": "my-site", // Cloudflare上のプロジェクト名
  "compatibility_date": "2025-01-01",
  "compatibility_flags": ["nodejs_compat"],
  "pages_build_output_dir": ".open-next/assets",
}

open-next.config.ts（プロジェクトルートに作成）:

import type { OpenNextConfig } from "@opennextjs/cloudflare";

export default {
  default: {},
} satisfies OpenNextConfig;

package.json に追記:

"build:cf": "opennextjs-cloudflare build",
"deploy": "opennextjs-cloudflare build && wrangler pages deploy"

Day 5 — Cloudflare Pagesで公開 + 環境変数設定

ゴール: 本番URLでサイトが表示される

手順

  1. GitHubにpush

    git add -A && git commit -m "add about/works pages, cloudflare deploy config"
git push origin master

  2. Cloudflare Pagesでプロジェクト作成

    • Cloudflare Dashboard → Workers & Pages → Create
    • GitHubリポジトリを連携
    • ビルド設定:
      項目値
      Framework presetNone
      Build commandnpm run build:cf
      Build output directory.open-next/assets

  3. 環境変数を設定（Settings → Environment variables）

    変数名値
    NEXT_PUBLIC_SUPABASE_URLSupabaseプロジェクトのURL
    NEXT_PUBLIC_SUPABASE_ANON_KEYSupabaseのanon key

  4. 初回ビルド・動作確認

    • トップ、about、works、記事一覧、記事詳細の各ページを確認
    • adminページへのアクセスも確認

完了チェックリスト