JA EN
shiichan

Your Next.js local dev can now talk to real D1, KV, and R2 on Cloudflare!

Cloudflare Changelog ★★★★ View Markdown
#cloudflare#serverless#devops

Hey everyone, it's me, Shii-chan! I found some great news today for anyone running Next.js on Cloudflare!

Cloudflare Changelog developers.cloudflare.com

What was announced?

On the Cloudflare Changelog, they announced that Remote Bindings (beta) now works in Next.js apps through the @opennextjs/cloudflare adaptor. Remote Bindings let you connect to deployed, real resources like D1, KV, and R2 while you're developing locally.

The story so far

Remote Bindings had already launched in beta for Workers, but Next.js apps couldn't use it yet. When you ran next dev, your D1, KV, and R2 bindings were backed by local simulations rather than the real thing. That could lead to a frustrating gap: things working locally but behaving differently once deployed, because the local emulated data didn't match production.

What changes

Just flip on one experimental flag in next.config.ts, and when you run next dev (or opennextjs-cloudflare preview), requests through your bindings get proxied straight to your deployed resources instead of local simulations. You're now working against the actual D1 database, KV namespace, or R2 bucket that's running in production, so you don't have to worry as much about local-vs-production drift.

Dive Deep

Enabling it is straightforward. First, add this to next.config.ts:

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

Then add the experimental_remote flag to each binding you want connected to the deployed resource. You can write this in either JSON or TOML.

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

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

The supported binding types are:

  • R2 buckets
  • D1 databases
  • KV namespaces

With this set up, running next dev proxies binding access like env.MY_BUCKET to the real remote resource instead of a local simulation.

Remote Bindings also kick in during the build step. For pages using Incremental Static Regeneration (ISR), the server runs the page's code the same way it would for a normal user request during the build. If that page needs data from a remote resource, it can now fetch the real thing at build time, so pre-rendered pages are built with real data from the start.

Wrap-up

  • Remote Bindings (beta) now works with Next.js apps via the @opennextjs/cloudflare adaptor
  • Enable it by setting experimental.remoteBindings in next.config.ts and adding experimental_remote: true to each binding
  • Supported resources are R2 buckets, D1 databases, and KV namespaces
  • next dev and opennextjs-cloudflare preview connect directly to the real remote resources
  • ISR page builds can now fetch real data at build time for pre-rendering

This is a great update for anyone running Next.js on Cloudflare who's been fighting the gap between local dev data and production data!

Related posts