Zenn
📝

next devからCloudflare Bindingsが使えるよ

2023/11/12に公開
Next.js
Cloudflare Pages
tech

はじめに

Next.js を Cloudflare Pages にデプロイする場合、@cloudflare/next-on-pages を使用することが有力な選択肢の一つです。これにより、Next.js の機能を活用しながら、Cloudflare Pages の恩恵を受けることができます。

以前は、Next.js 標準の development server（next dev）では、Cloudflare Bindings のシミュレーションが難しかったため、@cloudflare/next-on-pages を利用してビルドし、wrangler pages dev でシミュレーションを行う必要がありました。しかし、この方法ではビルドに時間がかかり、開発体験に支障をきたしていました。

有り難いことに、@cloudflare/next-on-pages@1.7.3 では、experimental ながらも、next dev でも Cloudflare Bindings をシミュレーションする方法が追加されました。

使い方

1. プロジェクトのセットアップ

https://developers.cloudflare.com/pages/framework-guides/deploy-a-nextjs-site/#use-the-edge-runtime

上記の手順に従って、Next.js プロジェクトをセットアップします。

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

色々聞かれますので、お好みで設定してください。

出力
Need to install the following packages:
create-cloudflare@2.6.2
Ok to proceed? (y)

using create-cloudflare version 2.6.2

╭ Create an application with Cloudflare Step 1 of 3
│
├ In which directory do you want to create your application?
│ dir ./my-next-app
│
├ What type of application do you want to create?
│ type Website or web app
│
├ Which development framework do you want to use?
│ framework Next
│
╰ Continue with Next via `npx create-next-app@13.4.19 my-next-app`

Need to install the following packages:
create-next-app@13.4.19
Ok to proceed? (y)
✔ 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 to use `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to customize the default import alias? … No / Yes
Creating a new Next.js app in

Using npm.

Initializing project with template: app


Installing dependencies:
- react
- react-dom
- next
- typescript
- @types/react
- @types/node
- @types/react-dom


added 31 packages, and audited 32 packages in 11s

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

found 0 vulnerabilities
Success! Created my-next-app at

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

╭ Configuring your application for Cloudflare Step 2 of 3
│
├ Created an example API route handler
│
├ Adding the Cloudflare Pages adapter
│ installed @cloudflare/next-on-pages@1, vercel
│
├ Retrieving current workerd compatibility date
│ compatibility date 2023-10-30
│
├ Adding command scripts for development and deployment
│ added commands to `package.json`
│
╰ Application configured

╭ Deploy with Cloudflare Step 3 of 3
│
├ Do you want to deploy your application?
│ no deploy via `npm run pages:deploy`
│
├  APPLICATION CREATED  Deploy your application with npm run pages:deploy
│
│ Navigate to the new directory cd my-next-app
│ Run the development server npm run pages:dev
│ Deploy your application npm run pages:deploy
│ Read the documentation https://developers.cloudflare.com/pages
│ Stuck? Join us at https://discord.gg/cloudflaredev
│
╰ See you again soon!

2. next dev で Cloudflare Bindings をシミュレーションする

今回は KV で試します。

Bindings を宣言するには、next.config.jsで@cloudflare/next-on-pages/next-devのsetupDevBindingsを呼び出す必要があります。これを行うことで、process.env経由で Bindings にアクセスできるようになります。

MY_KVという名前で KV にアクセスできるようにするため、next.config.jsに以下を追加します。

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

module.exports = nextConfig;

+if (process.env.NODE_ENV === "development") {
+  const { setupDevBindings } = require("@cloudflare/next-on-pages/__experimental__next-dev");
+
+  setupDevBindings({
+    kvNamespaces: ["MY_KV"],
+  });
+}

process.envに型を付けるために、型定義ファイルを作成します。
env.d.tsというファイルを作成し、以下を追加します。

env.d.ts
declare global {
  namespace NodeJS {
    interface ProcessEnv {
      [key: string]: string | undefined;
      MY_KV: KVNamespace;
    }
  }
}

export {};

これで、next dev で process.env.MY_KV から KV にアクセスできるようになります。

試しにアクセスカウンターを作ってみます。

不要なコードを消して、app/page.tsx を以下のようにします。

app/page.tsx
export const runtime = "edge";

async function incrementViewCount() {
  const kv = process.env.MY_KV;
  const v = await kv.get("views");
  const views = v ? parseInt(v) : 0;
  await kv.put("views", views + 1);

  return views + 1;
}

export default async function Home() {
  const views = await incrementViewCount();

  return <p>あなたは{views}人目の訪問者です！</p>;
}

↓ このように表示されるはずです。

リロードすると、カウントが増えることが分かると思います。

おわりに

今回は、next dev で Cloudflare Bindings をシミュレーションする方法を紹介することが本題でしたので、デプロイするところまではやりませんでしたが、そこまでやってみたいという方はぜひ私の前回の記事「Next.js の Route Handlers で Hono を使いつつ Auth.js で認証して Cloudflare Pages に Deploy したい」を参考にしてください。こちらの記事では最終的に D1 を使用したプロジェクトのデプロイまでを行っています。

Discussion