技術スタックの全体像
フロントエンドはNext.js App Router、認証はClerk、決済はStripe Checkout、ホスティングとサーバー実行環境はCloudflare Workersを中心に構成しています。競艇予想サービスでは、日次更新、レース単位のページ、課金状態に応じた表示制御が必要です。App RouterのServer ComponentとRoute Handlerは、この粒度の画面とAPIを同じリポジトリで管理しやすい点が合っていました。
UIは静的なLPだけではなく、レース一覧、詳細、アカウント、アップグレード導線を持つSaaS寄りの構成です。認証、購読状態、SEOページを同時に扱うため、Next.jsを中心に置き、外部サービスとの境界を薄く保つ方針にしました。
OpenNextを導入した理由
Cloudflare WorkersでNext.jsを動かすには、Node.js前提の挙動とWorkersの制約を埋める必要があります。OpenNextは、Next.jsアプリをCloudflare向けにビルドし、ルーティングやアセット配置をWorkers環境に合わせるために導入しました。
opennextjs-cloudflare build
opennextjs-cloudflare deployローカルの通常ビルドで通っても、Workers環境では利用できないAPIやサイズ制約で詰まることがあります。そのため、型チェック、Next.jsビルド、OpenNextビルド、GitHub Actions経由のデプロイを分けて確認する運用にしています。
Clerk認証と課金状態の扱い
認証はClerkに寄せ、ログイン、サインアップ、セッション管理をアプリ側で抱えすぎないようにしています。Next.js側では、保護したいページやAPIでユーザーIDを取得し、アプリ内のプロフィールや購読状態と紐づけます。
認証プロバイダを外部化すると、ユーザー体験の改善に集中できます。一方で、WebhookやAPIから見たユーザーIDの整合性、未ログイン時のリダイレクト、Workers上での環境変数設定は丁寧に確認する必要があります。
Stripe Checkout flow
決済はStripe Checkoutを使い、アプリ側ではCheckout Session作成、Webhook受信、購読状態更新を担当します。カード情報を自前で保持しないことで、実装と運用のリスクを下げられます。
user clicks upgrade
-> create Checkout Session
-> redirect to Stripe
-> webhook updates subscription
-> app unlocks PRO features詰まりやすいのはWebhookです。署名検証に必要なraw bodyの扱い、環境ごとのWebhook secret、成功ページに戻った直後の購読反映タイミングを分けて考える必要があります。
Cloudflare Workersの制約
Workersは高速で配信しやすい一方、Node.js互換が完全ではありません。ファイルシステム前提の処理、長時間実行、巨大な依存、ネイティブモジュールは避ける設計が必要です。予想ロジックや集計処理も、Workers上でリアルタイムに重い計算を抱えすぎないよう、事前計算とキャッシュを意識します。
また、環境変数はローカル、プレビュー、本番でずれやすいポイントです。Clerk、Stripe、データベース、分析系のキーを用途ごとに分け、GitHub Actionsのデプロイ経路でも同じ前提になるようにしています。
開発で詰まった点
一つ目は、Next.jsのバージョン差分です。App Routerやmetadata、Route Handlerの細かな挙動はバージョンで変わるため、実装前に同梱ドキュメントを確認する運用にしました。二つ目は、認証と課金の境界です。ログイン済みでも未購読、購読済みでもWebhook反映待ち、といった中間状態をUIで扱う必要があります。
三つ目は、SEOページとSaaS機能の同居です。競艇の解説記事は検索流入の入口になり、レース詳細や課金導線はプロダクト利用の中心です。記事側ではcanonical、構造化データ、内部リンクを整えつつ、機密ロジックや内部APIの詳細は公開しないバランスを取っています。
まとめ
Next.js、Clerk、Stripe、Cloudflare Workersの組み合わせは、認証付きSaaSを高速に立ち上げるうえで相性がよい構成です。ただし、Workers制約、Webhook、環境変数、Next.jsの版差分は早めに検証するべきです。KyoteiAIでは、SEO記事からプロダクト利用までを一つのApp Router構成で運用し、必要な部分だけを外部サービスに任せる設計にしています。