v0のプロジェクトをCloudflare Pagesにデプロイ

Page content

npx create-next-app@latest

npm install next@15.5.2 npm list next npm audit fix npm install –save-dev @cloudflare/next-on-pages

👉 Settings
👉 Functions
👉 Compatibility Flags

nodejs_compat

npm install next@15.5.2 を実行しても失敗してしまう場合、主な理由は**「すでにインストールされている他のパッケージが、より新しい Next.js（15.5.12）を要求して離さない」**状態になっているからです。

npmはプロジェクト全体の整合性を保とうとするため、一部だけを下げようとしても、他のライブラリとの矛盾が生じるとエラーを出して停止します。

解決するための手順を、確実な順に紹介します。

1. キャッシュと既存の依存関係をクリーンにする（推奨）

古い設定が残っているとうまくいかないことが多いため、一度リセットするのが最も確実です。

  1. node_modules フォルダと package-lock.json を削除する

    （手動で削除するか、コマンドプロンプトで以下を実行）

    Bash

    rd /s /q node_modules
del package-lock.json

  2. package.json を直接書き換える

    dependencies の中の "next": "^15.5.12" を "next": "15.5.2" に書き換えて保存します。

  3. 再度インストールする

    Bash

    npm install

2. --force を使って強制的に上書きする

npmに「警告はいいから、指定したバージョンを無理やり入れてくれ」と命令します。

Bash

npm install next@15.5.2 --force

3. 他の依存関係を確認する

もしこれでも失敗する場合、eslint-config-next など、Next.js とセットで動く他のライブラリも 15.5.12 に固定されている可能性があります。

その場合は、関連するものもまとめて指定してインストールしてみてください。

Bash

npm install next@15.5.2 eslint-config-next@15.5.2

なぜ Next.js のバージョンを下げるのが難しいのか？

npmの依存関係は、以下のような「木構造」で管理されています。一つの枝（Next.js）だけを無理に曲げようとすると、それに繋がっている他の枝が折れてしまう（矛盾が出る）ため、npmがガードをかけている状態です。

次のステップへの提案

もしこれらを実行してもまだエラーが出る場合は、エラーメッセージの冒頭数行を教えていただけますか？

「どのパッケージが Next.js 15.5.2 を拒否しているのか」が特定できれば、ピンポイントな解決策を提示できます。

v0で作成したプロジェクトをCloudflare Pagesにデプロイするのは非常に相性が良く、数分で完了します。v0は実質的に Next.js のコードを出力するため、Next.jsをCloudflare Pagesで動かすための「ビルド設定」がポイントになります。

以下のステップで進めてください。

1. v0からコードをダウンロードする

  1. v0の画面右上にある 「Download Code」 または 「Copy Code」 をクリックします。

  2. ローカルPCで npx create-next-app@latest などで作成したプロジェクトに、v0のコンポーネントを貼り付けます。

    • ※もし既にNext.jsのプロジェクトとしてGitHubに上げているなら、そのままでOKです。

2. Cloudflare Pages 用の準備（Adapterの導入）

Cloudflare PagesでNext.jsを動かすには、@cloudflare/next-on-pages というツールを使います。

  1. プロジェクトのルートで以下を実行します。

    Bash

    npm install --save-dev @cloudflare/next-on-pages

  2. next.config.mjs (または .js) を開き、ランタイムを edge に指定します。

    JavaScript

    /** @type {import('next').NextConfig} */
const nextConfig = {
  // Cloudflare Pagesで動かすために必要
  runtime: 'edge', 
};
export default nextConfig;

3. GitHub にプッシュする

Cloudflare PagesはGitHubのリポジトリを監視して自動デプロイするのが一番簡単です。

  • GitHubに新しいリポジトリを作成し、コードを git push しておきます。

4. Cloudflare ダッシュボードでの設定

  1. Cloudflareの管理画面に入り、「Workers & Pages」 > 「Create application」 > 「Pages」 > 「Connect to Git」 を選択します。

  2. 対象のGitHubリポジトリを選択します。

  3. 「Build settings」 を以下のように設定します。

    • Framework preset: Next.js

    • Build command: npx @cloudflare/next-on-pages

    • Build output directory: .vercel/output (※自動で設定されることが多いです)

  4. 「Environment variables（環境変数）」 に以下を追加します。

    • Variable name: NODE_VERSION

    • Value: 18 以上（例: 20）

  5. 「Save and Deploy」 をクリックします。

5. 埋め込み用「widget.js」の作成（オプション）

もしサイトの一部に「ウィジェット」として埋め込みたい場合は、pages/api/widget.js のようなファイルを作り、Reactコンポーネントを特定のDOMにマウントするJavaScriptを出力するようにします。

最も簡単なのは、パターン2（iframe） でデプロイされたページのURLをそのまま使うことです。

デプロイ後の確認事項

  • ドメインの紐付け: Cloudflareが https://xxx.pages.dev というURLを発行してくれます。

  • Worker AIとの接続: デプロイしたPagesの管理画面にある「Settings」>「Functions」から、先ほど作った Cloudflare Workers AI (Worker) とバインド（連携）設定を行うと、よりセキュアに通信できます。

これで、v0の美しいUIが世界中に配信されます！

次は、「AIに会社のPDF資料を読み込ませる（Vectorize）」 の手順を詳しく解説しましょうか？ それとも、「チャットの会話ログを保存するデータベース（D1）」 の作り方を見ますか？

原因は tw-animate-css というCSS（またはパッケージ）が見つからないため です。⚠️

❌ エラーの核心

Can't resolve 'tw-animate-css'

👉 Tailwind が次のような記述を読み込もうとして失敗しています。

おそらく globals.css の先頭に👇があります

@import "tw-animate-css";

または

@import 'tw-animate-css';

しかし…

📌 そのパッケージは存在しない or 未インストール

🔥 なぜ起きるか（よくある原因）

① テンプレをコピペしたが依存を入れていない

AI SaaS テンプレ・UIテンプレで頻発します。

② パッケージ名の間違い（最も多い）

実際に使われるのは👇

✅ tailwindcss-animate
❌ tw-animate-css（存在しない）

③ shadcn/ui のセットアップ途中

shadcn を使う場合、通常は👇

npm install tailwindcss-animate

✅ 最速の解決方法

⭐ 方法1（おすすめ）

正しいパッケージをインストール

npm install tailwindcss-animate

⭐ 方法2（import を修正）

globals.css を開き、次のように変更

❌ 間違い

@import "tw-animate-css";

✅ 正解

@import "tailwindcss-animate";

⭐ 方法3（不要なら削除）

アニメーションを使わないなら…

@import "tw-animate-css";

👉 この行を削除するだけでOK

🧠 なぜ Tailwind で起きる？

Tailwind v4 以降は PostCSS 経由で CSS import を解決するため、

👉 存在しないパッケージは即ビルドエラーになります

📌 まとめ（1行）

👉 存在しないCSSモジュールを読み込もうとしている

必要なら：

✅ 「AI SaaSテンプレで出るエラー完全対処集」
✅ 「shadcn/ui + Tailwind v4 正しい初期設定（2026版）」
✅ 「Vercelに一発デプロイできる最小構成」

も解説できます 🚀

❌ エラーの原因（結論）

👉 Next.js のバージョンが対応範囲外のため、依存関係が衝突しています ⚠️

🔥 エラーの核心

Found: next@16.1.6
Could not resolve dependency:
peer next@">=14.3.0 && <=15.5.2"
from @cloudflare/next-on-pages

👉 意味：

パッケージ 要求
あなたの環境 Next 16.1.6
next-on-pages Next 14.3〜15.5.2

💥 Next 16 は未対応

📌 何が起きているか

Next 16 ← あなた
Next 15 以下 ← 必須（Cloudflare）

👉 npm が「壊れる可能性が高い」と判断して停止

🧠 なぜ重要？

@cloudflare/next-on-pages は

👉 Next.js を Cloudflare Pages 用にビルド変換するツール

内部APIに強く依存するため
Next のメジャー更新に弱い です。

✅ 解決方法（おすすめ順）

⭐ 方法1（最も安全）

👉 Next.js を対応バージョンに下げる

npm install next@15.5.2

その後：

npm install --save-dev @cloudflare/next-on-pages

✔ Cloudflare Pages で確実に動く
✔ 本番向き

⭐ 方法2（強制インストール ⚠️ 非推奨）

npm install --save-dev @cloudflare/next-on-pages --legacy-peer-deps

または

npm install --save-dev @cloudflare/next-on-pages --force

❌ ただし：

  • ビルド失敗の可能性大

  • 本番で壊れることあり

  • サポート外

⭐ 方法3（Next 16 を使い続けたい場合）

👉 Cloudflare Pages を使わない

代替：

  • Vercel

  • Nodeサーバー

  • Docker

  • 他のホスティング

🚀 一番おすすめの構成（2026年）

🔹 Cloudflare Pages を使うなら

👉 Next 15 系がベスト

🧩 1行まとめ

👉 Next.js が新しすぎて Cloudflare のツールが未対応

⚡ 今回のエラーの種類

ERESOLVE unable to resolve dependency tree

👉 npm の「依存関係衝突エラー」

必要なら：

✅ Cloudflare Pages に最適な Next.js 構成
✅ Vercel vs Cloudflare Pages 比較（2026版）
✅ AI SaaS を最速で公開する方法
✅ Next.js デプロイ先おすすめランキング

も解説できます 🚀