JA EN
shiichan

Next.js のローカル開発から本物の D1・KV・R2 につながるようになったよ！

Cloudflare Changelog ★★★★ Markdown で見る
#cloudflare#serverless#devops

みんな、しぃちゃんだよ！ 今日は Next.js を Cloudflare で使ってる人にうれしいニュースを見つけたよ！

Cloudflare Changelog developers.cloudflare.com

なにが発表されたの？

Cloudflare の Changelog で、Remote Bindings（ベータ）が @opennextjs/cloudflare アダプター経由で Next.js アプリでも使えるようになったって発表されたの。Remote Bindings は、ローカル開発中に D1・KV・R2 みたいな「デプロイ済みの実リソース」へ直接つなげる機能なんだよ。

今までどうだったの？

Remote Bindings 自体は先に Workers 向けにベータ公開されてたんだけど、Next.js アプリからは使えなかったの。next dev でローカル開発するときは、D1 や KV、R2 の中身はローカルのシミュレーション(エミュレータ)扱いになってて、本番の実データとは別物だったんだよね。だから「ローカルでは動くのに本番だとデータが違って挙動が変わる」みたいなズレが起きがちだったの。

これで何が変わるの？

next.config.ts で実験的フラグを 1 つオンにするだけで、next dev(または opennextjs-cloudflare preview)を実行したときに、バインディング経由のリクエストが本番のリソースにそのままプロキシされるようになるの。ローカルのエミュレータじゃなくて、デプロイ済みの本物の D1 データベースや KV ネームスペース、R2 バケットに触れるってこと。手元の環境と本番環境のズレを気にしなくてよくなるのがうれしいポイントだね。

深く潜ってみよう

有効化の方法はシンプルだよ。まず next.config.ts でこう書くの。

initOpenNextCloudflareForDev({
  experimental: { remoteBindings: true }
});

そのうえで、リモートにつなげたいバインディングごとに experimental_remote フラグを付けるんだって。設定ファイルの書き方は JSON でも TOML でも OK。

{
  "r2_buckets": [{
    "bucket_name": "testing-bucket",
    "binding": "MY_BUCKET",
    "experimental_remote": true
  }]
}

[[r2_buckets]]
bucket_name = "testing-bucket"
binding = "MY_BUCKET"
experimental_remote = true

対応してるバインディングはこれだよ。

  • R2 バケット
  • D1 データベース
  • KV ネームスペース

この設定をした状態で next dev を起動すると、env.MY_BUCKET みたいなバインディング経由のアクセスが、ローカルのシミュレーションじゃなくて本物のリモートリソースにプロキシされるの。

しかも Remote Bindings は ビルド時 にも効くんだって。Incremental Static Regeneration(ISR)を使ってるページのビルド中は、通常のユーザーリクエストと同じコードが実行されるんだけど、そのページがリモートリソースのデータを必要とする場合、ビルドの段階で本物のデータを取得できるようになるの。つまり事前レンダリングされたページが、最初から実データを使って作られるってわけ。

まとめ

  • Remote Bindings(ベータ)が @opennextjs/cloudflare 経由で Next.js アプリに対応したよ
  • next.config.ts で experimental.remoteBindings を有効化し、各バインディングに experimental_remote: true を付けると使えるよ
  • 対応リソースは R2 バケット・D1 データベース・KV ネームスペース
  • next dev や opennextjs-cloudflare preview からリモートの実リソースに直接つながるよ
  • ISR ページのビルド時にも本物のデータを使って事前レンダリングできるようになるよ

Cloudflare で Next.js アプリを動かしてて、ローカル開発と本番のデータのズレに困ってた人にはかなり刺さるアップデートだね！

関連記事