Cloudflare Developers•10mo ago

using just `next dev` not that i know of

using just next dev not that i know of but may be possible, im a huge donkey so hope im not leading you down the wrong direction, even now im wondering if i actually did create the KV in wrangler, or if it didn't just automatically do that, you probably already saw this but the internal github doc:

https://github.com/cloudflare/next-on-pages/blob/main/internal-packages/next-dev/README.md

https://github.com/cloudflare/next-on-pages/blob/main/internal-packages/next-dev/README.md

that says it generates from miniflare, so i feel like you may not need it locally, but can't remember how i set it up last time hehe

54 Replies

Unknown User•10mo ago

Message Not Public

DonnagerOP•10mo ago

i installed wrangler locally then:

npm run wrangler kv:namespace create

npm run wrangler kv:namespace create

Unknown User•10mo ago

Message Not Public

DonnagerOP•10mo ago

next dev:

  const { setupDevBindings } = require("@cloudflare/next-on-pages/next-dev");
  setupDevBindings({
    bindings: {
      CLOUDFLARE_BUCKET: {
        type: "r2",
        bucketName: "bucket",
      },
      CLOUDFLARE_KV: {
        type: "kv",
        id: "CLOUDFLARE_KV",
      },
...

  const { setupDevBindings } = require("@cloudflare/next-on-pages/next-dev");
  setupDevBindings({
    bindings: {
      CLOUDFLARE_BUCKET: {
        type: "r2",
        bucketName: "bucket",
      },
      CLOUDFLARE_KV: {
        type: "kv",
        id: "CLOUDFLARE_KV",
      },
...

server component:

  const kv = getKv();
  const pageViews = (await kv.get("page_view")) ?? 0;
  const formattedPageViews =
    typeof pageViews === "number" ? pageViews : Number(pageViews);

  const kv = getKv();
  const pageViews = (await kv.get("page_view")) ?? 0;
  const formattedPageViews =
    typeof pageViews === "number" ? pageViews : Number(pageViews);

edit: getkv

export const getKv = () => {
    return process.env.CLOUDFLARE_KV as unknown as KVNamespace;
}

export const getKv = () => {
    return process.env.CLOUDFLARE_KV as unknown as KVNamespace;
}

it reads for me using this, hmm only difference i see is you did import instead of require, but not sure why that would impact anything i think you will need to set up dashboard when you deploy, but not necessary for local, i also think wrangler defaults to local, hmmm

Unknown User•10mo ago

Message Not Public

DonnagerOP•10mo ago

not sure on the first question im a donkey sir, i believe preview is a separate deployment like staging i hate to @Better James , because its not his job to be in the discords, but he would know all the answers here, he is on EU time i believe, but maybe he will see it lol oh okay yeah hmm, what version of next-on-pages are you on? i just reset the binding to a new ID and it worked out of box, so i dont think we need wrangler very sorry to lead you down wrong path

James•10mo ago

James•10mo ago

The name of the object is what you would use to access it, e.g. process.env.MY_KV_BINDING_VAR You don't need to create a kv namespace to run it. It should be created automatically if it doesn't exist.

DonnagerOP•10mo ago

thank you so much for responding! okay yeah, totally makes sense, so curiously in his original post he said process.env.TESTKV was undefined, but he set up

          TESTKV: {
            type: "kv",
            id: "TESTKV",
          },

          TESTKV: {
            type: "kv",
            id: "TESTKV",
          },

what would be a likely cause then? hmm i am baffled

Unknown User•10mo ago

Message Not Public

James•10mo ago

My assumption would be next-on-pages version being old - his code snippet worked fine when I tried it Yeah

Unknown User•10mo ago

Message Not Public

James•10mo ago

Yup

Unknown User•10mo ago

Message Not Public

James•10mo ago

Just going to ask it for the sake of asking it even thought the answer is probably yes, but you do have the latest next-on-pages as a dependency right?

Unknown User•10mo ago

Message Not Public

James•10mo ago

Unknown User•10mo ago

Message Not Public

James•10mo ago

if it's not too much trouble

DonnagerOP•10mo ago

hmm super baffling, can't wait to see it!

Unknown User•10mo ago

Message Not Public

James•10mo ago

Please can you opt the page that you're using the binding in to use the edge runtime

Unknown User•10mo ago

Message Not Public

James•10mo ago

export const runtime = 'edge';

export const runtime = 'edge';

Unknown User•10mo ago

Message Not Public

James•10mo ago

Also, KV.put is async so probably best to await it

Unknown User•10mo ago

Message Not Public

DonnagerOP•10mo ago

wowwww okay, did not know the runtime was required in local, it all makes sense now!!

James•10mo ago

If you have server functionality on a route, it should be opted into the edge runtime

DonnagerOP•10mo ago

if you are going to access cloudflare bindings in local yes, also if you deploy its all edge i believe thank you for the help sir!

Unknown User•10mo ago

Message Not Public

James•10mo ago

Yeah if you want server functionality on Pages it will need to be edge. You can still let routes that don't need server functionality be prerendered/SSG'd at build time (which Next.js tries to do by default), and we'll just serve the html/rsc files when a request comes in, but if a route needs server functionality, it'll need to be the edge runtime since it'll be running in workerd

Unknown User•10mo ago

Message Not Public

James•10mo ago

So when you deploy a route to Vercel that uses the edge runtime, that'll get sent to cloudflare, since the edge runtime (Vercel's project) is basically just a wrapper essentially to add some extra compat to workers for Vercel's deployments. That's a very simple way of thinking about it anyway

Unknown User•10mo ago

Message Not Public

James•10mo ago

Afraid not. Pages dev with wrangler doesn't support remote mode so you're already limited in that aspect, but we're actually using miniflare to deal with all this which does it locally in workerd

Unknown User•10mo ago

Message Not Public

James•10mo ago

No worries, have fun 🙂

Bram•10mo ago

little tip, in NextJS you could set the runtime on the root layout.tsx and it will use the same runtime for all the child pages as well

James•10mo ago

I would generally advise against that unless every single route will have server functionality. It's preferable to let routes be prerendered unless they absolutely need SSR

Unknown User•10mo ago

Message Not Public

Bram•10mo ago

yea true, might need to be careful Next has like 3 different caching mechanisms right? That are all on by default 😵‍💫

Unknown User•10mo ago

Message Not Public

James•10mo ago

No, you won't be able to access it at build time

Bram•10mo ago

just to be sure, if you set revalidate it will just be SSR with caching right?

Unknown User•10mo ago

Message Not Public

Bram•10mo ago

I think pulling in dynamic data on build time is not very common though?

Unknown User•10mo ago

Message Not Public

James•10mo ago

the export const revalidate = true only works on non-edge routes IIRC. You can set fetch(..., { next: { revalidate: ... } }) on edge routes to cache fetch requests for x amount of time, which is a new form of ISR in app dir land

Bram•10mo ago

yea, was talking about the latter err meant to reply to james ; p thanks for the info guys! one last question (couldn't find it in the docs so guess not) I am playing around with sveltekit (and liking the svelte 5 changes so far : D), is there something similar to next-dev for local binding? Or am I better off using cf-bindings-proxy for now?

James•10mo ago

Well, as much as i enjoy plugging my own lib, this poc by jculvey is probably better for svelte

Bram•10mo ago

Ah nice, it calls directly into miniflare, kinda similar to what next-dev does? I would still use your library if it would let me spin up two proxies (one with --remote and one with --local (I have a use case where I want to develop against a remote D2, but rest local) And with a bit of config on the pages side of things, it would know to which proxy it should forward the request to

403•10mo ago

Hi everyone! I came here for the same issue after reading the documentation a couple of times. Maybe adding export const runtime = 'edge'; to the documentation would help few people?

James•10mo ago

It's in the github readme but i'll ping dario about adding it to the official docs page 👍🏻

Gaming

Programming

using just `next dev` not that i know of