Cloudflare Developers•11mo ago

**Need help using KV with next-on-pages

Need help using KV with next-on-pages I've spend several hours trying to access KV in dev environment in my Next.js Project using next-on-pages. Setup: - I'm using next@14.0.0, @cloudflare/next-on-pages@1.7.2 - Installed cf-bindings-proxy from @Better James - Run npx cf-bindings-proxy --kv=MY_KV_NAMESPACE from Terminal 1 - Run next dev from Terminal 2 Below is the route in /app dir

import { binding } from "cf-bindings-proxy";

export const runtime = "edge";

export async function GET() {
  const value = await binding("MY_KV_NAMESPACE").get("test");
  console.log(value); // 🔴 I get a null here. Expected "Hello World"
  return new Response("OK", {
    status: 200,
  });
}

import { binding } from "cf-bindings-proxy";

export const runtime = "edge";

export async function GET() {
  const value = await binding("MY_KV_NAMESPACE").get("test");
  console.log(value); // 🔴 I get a null here. Expected "Hello World"
  return new Response("OK", {
    status: 200,
  });
}

When I try getting the value from CLI, it works:

$ wrangler kv:key get --binding=MY_KV_NAMESPACE "test"
# I get "Hello World"

$ wrangler kv:key get --binding=MY_KV_NAMESPACE "test"
# I get "Hello World"

--- - I've also tried using a wrangler.toml file with the kv details specificed
- I've also checked the below repos to see what they are doing different
https://github.com/looks-to-me/looks-to-me
https://github.com/james-elicx/cloudy
https://github.com/Rei-x/next-on-cloudflare-example
What am I doing wrong? I'd really appreciate any help 🙏

7 Replies

James•11mo ago

Would you be able to share a link to a reproduction for this problem, please?

manishrc•11mo ago

Hi @Better James thanks for offering to help! I've created a repository here: https://github.com/manishrc/nextjs-cloudflare-pages-with-bindings/

$ curl http://localhost:3000/api/hello
# <empty>
# Expected "Hello World"

$ curl http://localhost:3000/api/hello
# <empty>
# Expected "Hello World"

GitHub

GitHub - manishrc/nextjs-cloudflare-pages-with-bindings: Next.js ap...

Next.js app dir on Cloudflare Pages with Fast-refresh and Bindings in dev - GitHub - manishrc/nextjs-cloudflare-pages-with-bindings: Next.js app dir on Cloudflare Pages with Fast-refresh and Bindin...

James•11mo ago

It seems to work fine for me are you sure you've put data into the kv namespace? e.g., I had to do npx wrangler kv:key put test hello --namespace-id=FOLDER_CMS_PREVIEW --local first

manishrc•11mo ago

Okay! I realize my stupidity now. Thanks for your help 🙏 My understanding was that this will proxy into the namespace in the KV cloud, but these are actually stored locally? I had set the value in the CF dashboard and was expecting to see the value come through. Do I need to make sure I do not use the same Namespace in other projects so that the data is kept separate?

James•11mo ago

wrangler pages dev (which the proxy uses) doesn't support remote mode so it won't be able to interact with data stored on Cloudflare in the cloud, only local data You can use the same namespace for deployed and local, just the data will be pulled from different places

manishrc•11mo ago

This clears it a lot, thank you.

Gaming

Programming

**Need help using KV with next-on-pages