【初心者】Manusが作った静的サイトをCloudflare×Next.jsで公開するまで

個人開発で Next.js（App Router）を Cloudflare Workers にデプロイする構成を試してみた．
目的は デプロイまでの一連の流れを経験すること であり，サイトの内容自体は何でも良いので，Manusに適当に生成してもらった．
その過程でいくつかハマったので，同じところで詰まる人や未来の自分用にまとめる．

https://qr.paps.jp/IU0ll
https://isekai-transfer.4134838499696914.workers.dev

開発環境

OS: WSL2 (Ubuntu)
Node.js: v22.8.0
npm: 10.8.2
Next.js: 16.1.5 (App Router)
Cloudflare Wrangler: 4.69.0
@opennextjs/cloudflare: 1.17.1

プロジェクト作成

npm create cloudflare@latest -- my-next-app --framework=next
cd my-next-app
npm run dev

http://localhost:3000 で起動を確認．

ディレクトリ構成（App Router）

src/
 ├─ app/
 │   ├─ page.tsx      # トップページ
 │   ├─ layout.tsx    # 全体レイアウト
 │   └─ globals.css
 ├─ components
 ├─ hooks
 ├─ lib

src/app 構成になっているが問題なし（Next.js公式対応）

Cloudflare にデプロイ

npm run deploy

初回は wrangler login が走り，Cloudflare の認証画面が開く．

デプロイ後，https://xxxx.workers.dev 形式のURLが発行される．

発生した問題

Radix UI / shadcn/ui の依存関係エラー

Cannot find module '@radix-ui/react-accordion'
Cannot find module '@radix-ui/react-dialog'

npm run devによるローカル環境での実行では問題にならなかったが，npm run preview，npm run deployでは上記のモジュールなどが認識されず，エラーになった．
Radix UIは自動では入らないようなので，必要なものを個別にインストールした．

Recharts + React 19 で型エラー

Property 'payload' does not exist on type 'Props'

Recharts v3がインストールされていたが，ManusはRecharts v2を想定して生成していた．
ローカル環境では問題にならなかったが，本番環境でエラーになった．
Recharts v3に対応するようにコードを修正した．

GitHub のアカウント切り替え

本実装には直接関係はないが，昔使っていたgithubアカウントの情報が残っていて，今使っているアカウントを利用するように設定しきれていなかった．

.ssh/config

# 今使うアカウント
Host github.com
  HostName github.com
  User git
  IdentityFile ~/.ssh/id_ed25519
  IdentitiesOnly yes

# 昔のアカウント
Host github-old
  HostName github.com
  User git
  IdentityFile ~/.ssh/id_rsa
  IdentitiesOnly yes

configをこのように追加することで設定した．

感想

デプロイまで通すだけでも学びが多い．
ローカル環境ではエラーが発生していなかったので，ここまでやっていなければ自分の作成したものにある問題を認識すらできなかったし，この問題の解決を通じてNext.jsの理解も少し深まった．