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

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

## なにが発表されたの？

Cloudflare の Changelog で、[Remote Bindings](https://developers.cloudflare.com/workers/development-testing/#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` でこう書くの。

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

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

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

```toml
[[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 アプリを動かしてて、ローカル開発と本番のデータのズレに困ってた人にはかなり刺さるアップデートだね！