コンテンツにスキップ

始める

フルスタック (SSR) Next.js アプリを Cloudflare Pages にデプロイする方法を学びましょう。

新しいアプリ

Cloudflare で実行するように事前設定された新しい Next.js アプリを作成するには、次のコマンドを実行します：

Terminal window
npm create cloudflare@latest -- my-next-app --framework=next

アプリの開発に関する詳細なガイダンスについては、Bindings または Next.js ドキュメント ↗ を参照してください。

既存のアプリ

1. next-on-pages をインストール

まず、@cloudflare/next-on-pages ↗ をインストールします：

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

2. wrangler.toml ファイルを追加

次に、Next.js アプリのルートディレクトリに wrangler.toml ファイルを追加します：

name = "my-app"
compatibility_date = "2024-07-29"
compatibility_flags = ["nodejs_compat"]
pages_build_output_dir = ".vercel/output/static"

ここで、Pages プロジェクトを構成し、bindings を介してアクセスできるリソースを定義します。

3. next.config.mjs を更新

次に、next.config.mjs ファイルの内容を更新します。

next.config.mjs
 import { setupDevPlatform } from '@cloudflare/next-on-pages/next-dev';


/** @type {import('next').NextConfig} */
const nextConfig = {};


 if (process.env.NODE_ENV === 'development') {
   await setupDevPlatform();
 }


export default nextConfig;

これらの変更により、ローカル開発で bindings にアクセスできるようになります。

4. すべてのサーバーレンダリングルートが Edge Runtime を使用することを確認

Next.js には 2つの “runtimes” ↗ — “Edge” と “Node.js” があります。Cloudflare で Next.js アプリを実行する際には、利用可能な Node.js API を使用できますが、現在は Next.js の “Edge” ランタイムのみを使用できます。

これは、各サーバーレンダリングルート — 例: API ルートや getServerSideProps を使用するルート — に対して “Edge” ランタイムを使用するように構成する必要があることを意味します：

export const runtime = "edge";

5. package.json を更新

package.json ファイルのスクリプトフィールドに次の内容を追加します：

package.json
"pages:build": "npx @cloudflare/next-on-pages",
"preview": "npm run pages:build && wrangler pages dev",
"deploy": "npm run pages:build && wrangler pages deploy"
  • npm run pages:build: next build を実行し、その出力を Cloudflare Pages と互換性のある形式に変換します。
  • npm run preview: アプリをビルドし、workerd ↗ でローカルに実行します。(next dev はアプリを Node.js でのみ実行します)
  • npm run deploy: アプリをビルドし、Cloudflare にデプロイします。

6. Cloudflare Pages にデプロイ

コマンドラインからデプロイするか：

Terminal window
npm run deploy

または、Github または Gitlab リポジトリを接続し、Cloudflare が自動的にマージした各プルリクエストをビルドしてデプロイします。

7. (オプション) eslint-plugin-next-on-pages を追加

オプションとして、eslint-plugin-next-on-pages を追加して、Next.js アプリが Cloudflare Pages で正しく実行されるように構成されているかを確認することができます。

Terminal window
npm install --save-dev eslint-plugin-next-on-pages

インストールが完了したら、次の内容を .eslintrc.json に追加します：

.eslintrc.json
{
  "extends": [
    "next/core-web-vitals",
    "plugin:eslint-plugin-next-on-pages/recommended"
  ],
  "plugins": [
    "eslint-plugin-next-on-pages"
  ]
}

関連リソース

Cloudflare DashboardDiscordCommunityLearning CenterSupport Portal
Cookie Settings