OpenNEXTを利用してCloudFlare WorkersでNext.jsを動作させる

はじめに

この記事では、 Cloudflare Workers と Next.js を組み合わせて、 サーバーレス環境でNext.jsアプリケーションを実行する方法 について書こうと思います。

最初は、 next-on-pages を利用して作成しようと思いましたが、Cloudflareのデプロイが失敗してうまくいきませんでした。
Cloudflareのドキュメント上で OpenNEXT を推奨していたので、そちらに乗り換えました。

環境について

開発環境は以下の通りです。

• OS: Windows11 (WSL2)
  • ディストリビューション: Ubuntu 22.04.5 LTS
    • Node.js: 20.19.3
• インストールしたパッケージ
  • NextJs: 15.3.5
  • opennextjs/cloudflare: 1.5.2
  • wrangler: 4.25.1

インストール

OpenNEXTを利用してNext.jsプロジェクトの環境を構築する手順を説明します。
OpenNEXTは、Next.jsアプリケーションをCloudflare Workersにデプロイするのに、必要な設定やスクリプトを自動的に生成してくれます。

以下の公式ドキュメントを参照し、手順に従って環境を作成しました。

🔗 OpenNEXT Cloudflare - Get Started

$ npm create cloudflare@latest -- my-next-app --framework=next --platform=workers

実行結果

──────────────────────────────────────────────────────────────────────────────────────────────────────────
👋 Welcome to create-cloudflare v2.50.4!
🧡 Let's get started.
📊 Cloudflare collects telemetry about your usage of Create-Cloudflare.

Learn more at: https://github.com/cloudflare/workers-sdk/blob/main/packages/create-cloudflare/telemetry.md
──────────────────────────────────────────────────────────────────────────────────────────────────────────

╭ Create an application with Cloudflare Step 1 of 3
│
├ In which directory do you want to create your application?
│ dir ./my-next-app
│
├ What would you like to start with?
│ category Framework Starter
│
├ Which development framework do you want to use?
│ framework Next.js
│
├ Select your deployment platform
│ platform Workers with Assets
│
├ Continue with Next.js via `npx create-next-app@15.3.5 my-next-app`
│

✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like your code inside a `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to use Turbopack for `next dev`? … No / Yes
✔ Would you like to customize the import alias (`@/*` by default)? … No / Yes
Creating a new Next.js app in /mnt/c/workspace/opennext/my-next-app.

Using npm.

Initializing project with template: app-tw

Installing dependencies:
- react
- react-dom
- next

Installing devDependencies:
- typescript
- @types/node
- @types/react
- @types/react-dom
- @tailwindcss/postcss
- tailwindcss
- eslint
- eslint-config-next
- @eslint/eslintrc

added 339 packages, and audited 340 packages in 2m

137 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
Initialized a git repository.

Success! Created my-next-app at /mnt/c/workspace/opennext/my-next-app

A new version of `create-next-app` is available!
You can update by running: npm i -g create-next-app

├ Copying template files
│ files copied to project directory
│
╰ Application created

╭ Configuring your application for Cloudflare Step 2 of 3
│
├ Installing wrangler A command line tool for building Cloudflare Workers
│ installed via `npm install wrangler --save-dev`
│
├ Adding the Cloudflare adapter
│ installed @opennextjs/cloudflare)}
│
├ Updating `next.config.ts`
│ updated `next.config.ts`
│
├ Adding Wrangler files to the .gitignore file
│ updated .gitignore file
│
├ Updating `package.json` scripts
│ updated `package.json`
│
├ Generating types for your application
│ generated to `./cloudflare-env.d.ts` via `npm run cf-typegen`
│
├ Installing @types/node
│ installed via npm
│
├ Do you want to use git for version control?
│ yes git
│
├ Initializing git repo
│ initialized git
│
├ Committing new files
│ git commit
│
╰ Application configured

╭ Deploy with Cloudflare Step 3 of 3
│
├ Do you want to deploy your application?
│ yes deploy via `npm run deploy`
│
├ Logging into Cloudflare checking authentication status
│ logged in
│
├ Selecting Cloudflare account retrieving accounts
│ account [e-mail]'s Account
│

> my-next-app@0.1.0 deploy
> opennextjs-cloudflare build && opennextjs-cloudflare deploy

デプロイ

プロジェクトのインストールの途中で、デプロイするを選択すると Cloudflare Workersへのデプロイが始まります。
OpenNEXTは、CloudflareのCLIツールであるwranglerと連携して、デプロイできる仕組みを提供しています。
デプロイが完了すると、Cloudflare WorkersのURLを通じてNext.jsアプリケーションにアクセスできるようになります。

例: https://my-next-app.xxxxxxxxx.workers.dev/

おわりに

next-on-pages が失敗した理由を探していて、NextJsのバージョン15からサポート外になったことがわかりました

完成したプロジェクトは、NextJsの設定や、wranglerの設定が自動で用意されるので、結構ブラックボックス感があるので、一つずつ紐解いていこうと思います。