Hey, in a Next.js app running on Cloudflare Workers, what are the trade-offs between accessing a KV

PPat Branchaud Hey, in a Next.js app running on Cloudflare Workers, what are the trade-offs bet...

H

Hello, I’m Allie!•4/19/24, 7:10 PM

There is also a rate limit on the API(I believe it is 1200 rpm)

F

FelDev•4/19/24, 7:16 PM

good point https://developers.cloudflare.com/fundamentals/api/reference/limits/

The global rate limit for the Cloudflare API is 1200 requests per five minutes per user, and applies cumulatively regardless of whether the request is made via the dashboard, API key, or API token.
[...]
Enterprise customers can also contact Cloudflare Support to raise the limit to a higher value.

H

Hello, I’m Allie!•4/19/24, 7:17 PM

Oh, five minutes, nvm

PPat Branchaud Hey, in a Next.js app running on Cloudflare Workers, what are the trade-offs bet...

C

Chaika•4/19/24, 8:25 PM

considering mostly performance

If you're considering mostly performance, that api endpoint always goes back to core so it'll be way slower across the board. The KV binding uses cache in the local dc, and then goes to one of the central stores

K

karim•4/20/24, 2:08 AM

my CPU time on my next.js site hosted on cf pages seems high, is this normal? The functions aren't anything complex just the ones that run when initially loading the page. If your curious I had a massive traffic spike on the 15th

M

Matt•4/20/24, 3:32 AM

anyone have server actions working with a deployed next app? not having any luck

I'm getting a 405

M

Matt•4/20/24, 3:34 AM

looks like https://github.com/cloudflare/next-on-pages/issues/679

GitHub

[🐛 Bug]: Calling server actions on a static or SSR pages returns 40...

next-on-pages environment related information System: Platform: darwin Arch: arm64 Version: Darwin Kernel Version 23.2.0: Wed Nov 15 21:55:06 PST 2023; root:xnu-10002.61.3~2/RELEASE_ARM64_T6020 CPU...

M

Matt•4/20/24, 3:34 AM

however when I add

export const runtime = 'edge';

export const runtime = 'edge';

export const runtime = 'edge';

export const runtime = 'edge';

I then get a 404

M

Matt•4/20/24, 3:37 AM

oh very strange... I had NODE_ENV = production, locally, so i could build using a .env for production before deploying to next ... removing that has it back to a 200 and working but I still need to provide

export const runtime = "edge";

export const runtime = "edge";

export const runtime = "edge";

export const runtime = "edge";

on my static page unfortunately

MMatt oh very strange... I had NODE_ENV = production, locally, so i could build using ...

N

neoney•4/20/24, 1:16 PM

yes, that is required

Kkarim my CPU time on my next.js site hosted on cf pages seems high, is this normal? Th...

N

Nob•4/21/24, 12:20 AM

seem like a lot

N

Nob•4/21/24, 12:22 AM

I have about 30-40ms

N

neoney•4/21/24, 12:37 AM

how would one handle uploading files to R2 from a next.js server action?

Nneoney how would one handle uploading files to R2 from a next.js server action?

T

thanhle•4/21/24, 1:13 AM

i prefer uploading from client after you get the presignedurl

M

Mirage•4/21/24, 1:14 AM

not sure what's happening but I'm deploying my site using next-on-pages on CF, it gives me a preview deployment url, but it actually fails to deploy when I check on CF's end

O

osa•4/21/24, 8:33 AM

I'm trying to get cache headers working for images loaded with custom loader which utilizes the default Cloudflare Image Optimization implementation. These files are served from the public folder (

public/images

public/images

public/images

public/images) which by default gets no cache (

public, max-age=0, must-revalidate

public, max-age=0, must-revalidate

public, max-age=0, must-revalidate

public, max-age=0, must-revalidate) and so the optimizer serves them with this header as well.

I've tried to add the following config settings:

{
  async headers() {
    return [
      {
        source: '/cdn-cgi/image/(.*)', // does not work
        headers: [
          {
            key: 'cache-control',
            value: 'public, max-age=14400',
          },
        ],
      },
      {
        source: '/images/(.*)', // does not work
        headers: [
          {
            key: 'cache-control',
            value: 'public, max-age=14400',
          },
        ],
      },
    ];
  },
  images: {
    minimumCacheTTL: 3600, // this does nothing
    loader: 'custom',
    loaderFile: './imageLoader.js',
  },
}

{
  async headers() {
    return [
      {
        source: '/cdn-cgi/image/(.*)', // does not work
        headers: [
          {
            key: 'cache-control',
            value: 'public, max-age=14400',
          },
        ],
      },
      {
        source: '/images/(.*)', // does not work
        headers: [
          {
            key: 'cache-control',
            value: 'public, max-age=14400',
          },
        ],
      },
    ];
  },
  images: {
    minimumCacheTTL: 3600, // this does nothing
    loader: 'custom',
    loaderFile: './imageLoader.js',
  },
}

{
  async headers() {
    return [
      {
        source: '/cdn-cgi/image/(.*)', // does not work
        headers: [
          {
            key: 'cache-control',
            value: 'public, max-age=14400',
          },
        ],
      },
      {
        source: '/images/(.*)', // does not work
        headers: [
          {
            key: 'cache-control',
            value: 'public, max-age=14400',
          },
        ],
      },
    ];
  },
  images: {
    minimumCacheTTL: 3600, // this does nothing
    loader: 'custom',
    loaderFile: './imageLoader.js',
  },
}

{
  async headers() {
    return [
      {
        source: '/cdn-cgi/image/(.*)', // does not work
        headers: [
          {
            key: 'cache-control',
            value: 'public, max-age=14400',
          },
        ],
      },
      {
        source: '/images/(.*)', // does not work
        headers: [
          {
            key: 'cache-control',
            value: 'public, max-age=14400',
          },
        ],
      },
    ];
  },
  images: {
    minimumCacheTTL: 3600, // this does nothing
    loader: 'custom',
    loaderFile: './imageLoader.js',
  },
}

I also tried adding them to

_headers

_headers

_headers

_headers file in the root of the project but they don't seem to get included in the final build.

Only way I've been able to get cache headers working for these files is by modifying

./.vercel/output/static/_headers

./.vercel/output/static/_headers

./.vercel/output/static/_headers

./.vercel/output/static/_headers after the build by adding this to the end of the generated file:

/images/*
  cache-control: public,max-age=3600

/images/*
  cache-control: public,max-age=3600

/images/*
  cache-control: public,max-age=3600

/images/*
  cache-control: public,max-age=3600

Am I missing something or is this the only way to get cache headers working for these images?

T

Tommerty•4/21/24, 10:55 AM

Hey there

I currently have a website on Vercel and the main reason we chose Vercel was due to how easy it was to set up a multi tenant system (we allow our "Pro" users to attach a domain to their profile and it's as simple as letting them point either a root domain to the Vercel IP, or a CNAME to their subdomain (username.website.com)).

I'd like for us to move back to Cloudflare tbh, as I have never been a big fan of Vercels pricing model (even before the recent changes), but I'm stuck at a loss of understanding how we could set something like this up on Cloudflare, as it's quite confusing regarding the "edge certs/client certs/custom hostnames/origin server etc.

Is there any documentation/posts/resources to help point me in the right direction? Right now the routing is just going through the middleware.ts and Vercel pretty much take care of the rest.

TIA!

N

neoney•4/21/24, 11:55 AM

I believe all you need is a CNAME pointed to your pages subdomain and adding the domain in the project's settings

N

neoney•4/21/24, 11:55 AM

You can add it using the API too

N

neoney•4/21/24, 11:55 AM

There's a limit of 500 I believe, and no wildcard support yet

N

neoney•4/21/24, 11:55 AM

You could get around that using a worker to proxy it

T

Tommerty•4/21/24, 4:55 PM

Thanks, will investigate! I assumed I'd need to sort out the whole cloudflare for saas and all this complicated stuff

B

bun•4/21/24, 5:16 PM

i have connection timeouts with no logs

B

bun•4/21/24, 5:23 PM

$ next dev --turbo
/Users/user/app/node_modules/wrangler/wrangler-dist/cli.js:29573
            throw a;
            ^

TypeError: fetch failed
    at fetch (/Users/user/app/node_modules/wrangler/wrangler-dist/cli.js:17033:19)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async getRegisteredWorkers (/Users/user/app/node_modules/wrangler/wrangler-dist/cli.js:127790:22)
    at async getBoundRegisteredWorkers (/Users/user/app/node_modules/wrangler/wrangler-dist/cli.js:127810:29)
    at async getMiniflareOptionsFromConfig (/Users/user/app/node_modules/wrangler/wrangler-dist/cli.js:173117:29)
    at async getPlatformProxy (/Users/user/app/node_modules/wrangler/wrangler-dist/cli.js:173089:28)
    at async setupDevPlatform (/Users/user/app/node_modules/@cloudflare/next-on-pages/dist/next-dev/index.cjs:183:23)
    at async file:///Users/user/app/apps/web/next.config.mjs:4:3 {

$ next dev --turbo
/Users/user/app/node_modules/wrangler/wrangler-dist/cli.js:29573
            throw a;
            ^

TypeError: fetch failed
    at fetch (/Users/user/app/node_modules/wrangler/wrangler-dist/cli.js:17033:19)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async getRegisteredWorkers (/Users/user/app/node_modules/wrangler/wrangler-dist/cli.js:127790:22)
    at async getBoundRegisteredWorkers (/Users/user/app/node_modules/wrangler/wrangler-dist/cli.js:127810:29)
    at async getMiniflareOptionsFromConfig (/Users/user/app/node_modules/wrangler/wrangler-dist/cli.js:173117:29)
    at async getPlatformProxy (/Users/user/app/node_modules/wrangler/wrangler-dist/cli.js:173089:28)
    at async setupDevPlatform (/Users/user/app/node_modules/@cloudflare/next-on-pages/dist/next-dev/index.cjs:183:23)
    at async file:///Users/user/app/apps/web/next.config.mjs:4:3 {

$ next dev --turbo
/Users/user/app/node_modules/wrangler/wrangler-dist/cli.js:29573
            throw a;
            ^

TypeError: fetch failed
    at fetch (/Users/user/app/node_modules/wrangler/wrangler-dist/cli.js:17033:19)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async getRegisteredWorkers (/Users/user/app/node_modules/wrangler/wrangler-dist/cli.js:127790:22)
    at async getBoundRegisteredWorkers (/Users/user/app/node_modules/wrangler/wrangler-dist/cli.js:127810:29)
    at async getMiniflareOptionsFromConfig (/Users/user/app/node_modules/wrangler/wrangler-dist/cli.js:173117:29)
    at async getPlatformProxy (/Users/user/app/node_modules/wrangler/wrangler-dist/cli.js:173089:28)
    at async setupDevPlatform (/Users/user/app/node_modules/@cloudflare/next-on-pages/dist/next-dev/index.cjs:183:23)
    at async file:///Users/user/app/apps/web/next.config.mjs:4:3 {

$ next dev --turbo
/Users/user/app/node_modules/wrangler/wrangler-dist/cli.js:29573
            throw a;
            ^

TypeError: fetch failed
    at fetch (/Users/user/app/node_modules/wrangler/wrangler-dist/cli.js:17033:19)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async getRegisteredWorkers (/Users/user/app/node_modules/wrangler/wrangler-dist/cli.js:127790:22)
    at async getBoundRegisteredWorkers (/Users/user/app/node_modules/wrangler/wrangler-dist/cli.js:127810:29)
    at async getMiniflareOptionsFromConfig (/Users/user/app/node_modules/wrangler/wrangler-dist/cli.js:173117:29)
    at async getPlatformProxy (/Users/user/app/node_modules/wrangler/wrangler-dist/cli.js:173089:28)
    at async setupDevPlatform (/Users/user/app/node_modules/@cloudflare/next-on-pages/dist/next-dev/index.cjs:183:23)
    at async file:///Users/user/app/apps/web/next.config.mjs:4:3 {

B

bun•4/21/24, 5:23 PM

on next 14.2

@

@che•4/21/24, 9:15 PM

Does anyone here know if No Access will be supported with next-on-pages? Recommend https://developers.cloudflare.com/workers/runtime-apis/bindings/rate-limit/ is updated to indicated rate limiting isn't currently working with pages. It works locally for me but fails on deploy, have been informed via ^rate limiting beta channel it's due to the way .toml is handled and there is no rate limiting setting within page settings

Bbun ``` $ next dev --turbo /Users/user/app/node_modules/wrangler/wrangler-dist/cli.j...

M

makisuo•4/21/24, 10:51 PM

having this issue too randomly after hot reloading.

F

FelDev•4/22/24, 1:59 PM

Is Vercel dropping support for Edge rendering going to affect next-on-pages?
https://twitter.com/leeerob/status/1780705942734331983

Lee Robinson (@leeerob) on X

So, @vercel reverted all edge rendering back to Node.js

Wanted to correct the record here as it's something I've advocated for in the past, and share what I've learned since then.

Also, the "edge" naming has been a bit confusing, so let's clear that up here as well.

What is…

Twitter

•

4/17/24, 9:12 PM

FFelDev Is Vercel dropping support for Edge rendering going to affect next-on-pages? htt...

I

Isaac McFadyen•4/22/24, 3:24 PM

So just keep in mind that this is for vercel.com, not all Vercel sites (which still can and do use edge rendering).

I

Isaac McFadyen•4/22/24, 3:24 PM

That doesn't mean it won't affect next-on-pages, but just to clarify that tweet.

I

Isaac McFadyen•4/22/24, 3:25 PM

https://twitter.com/leeerob/status/1780710814560960759

Lee Robinson (@leeerob) on X

@fredkisss @vercel This is about Vercel’s usage of Vercel itself. Not your own site code

Twitter

•

4/17/24, 9:31 PM

F

FelDev•4/22/24, 3:25 PM

Oh, I totally misinterpreted that tweet

Thanks!

K

Krstan Popeski•4/22/24, 4:26 PM

Hey guys, I am struggling with 'jose' for JWT signing and verification of tokens. I am writing a Next.JS app for cloudlfare pages, previously I had it statically generated and used Cloudflare's functions as the backend, but since I switched to next-on-pages, the cloudflare functions stopped working, so I had to refactor the entire "backend" to use Next.js API routes instead. The problem here is that once I switched to Next.JS API routes, I had to refactor the cloudflare functions middleware (which was responsible for authorization) into Next.JS API middleware, now after I did that the previously used library: @tsndr/cloudflare-worker-jwt stopped working, so I had to find a new one. The alternative that I found was 'jose' https://www.npmjs.com/package/jose. This is how I am using it to sign and verify a JWT:
Singing:
///////////
const JWT_SECRET = env.JWT_SECRET
const secret = new TextEncoder().encode(JWT_SECRET)
const alg = 'HS256'
const token = await new jose.SignJWT({
id: _id
})
.setProtectedHeader({ alg })
.setIssuedAt()
.setIssuer('urn:test')
.setAudience('urn:test-audience)
.setExpirationTime('15m')
.sign(secret)

Verifying:
///////////
await jose.jwtVerify(token, secret, {
issuer: 'urn:test',
audience: 'urn:test-audience',
})

The token and secret used in the verifying step are the same as in the signing.

The problem I have here is that the verifying fails with this message:
[JWSInvalid: Invalid Compact JWS] {
code: 'ERR_JWS_INVALID',
name: 'JWSInvalid'
}

Even though I try to verify the token immediately after I create it (I try this for debugging purposes).
If someone encountered a similar issue and can help me, I will be very grateful. Thank you and sorry for the long post.

M

matiasjMusante•4/22/24, 4:32 PM

Hello, I've been trying unsuccessfully to modify the cache behavior in my fetch requests using Next.js (next-on-pages, for example, in route.js:

export const runtime = 'edge'
import { revalidatePath } from 'next/cache'

export async function GET() {
// revalidatePath('/api'); REVALIDATE PATH DOES WORK.
const res = await fetch('https://postgrest-2n44.onrender.com/todos')
const data = await res.json()
return Response.json(data)
}

As you can see in the comments, revalidatePath does update the data obtained through the fetch.

But when I try to include, for example, "native" Next.js options, such as including {"cache: no-store"} in the fetch request, I receive the error:

Error: The 'cache' field on 'RequestInitializerDict' is not implemented. cloudflare

I also tried with headers (cache-control, etc.) and with next: revalidate x.
Am I doing something wrong or misunderstanding something? Thank you very much.

Link to my repo:

https://github.com/matimusss/nextcloudflare

Thanks in advance!!

GitHub

GitHub - matimusss/nextcloudflare

Contribute to matimusss/nextcloudflare development by creating an account on GitHub.

M

matiasjMusante•4/22/24, 4:33 PM

(the "error" is I cant find the way to opt-out of cache using thos options, only with revalidatePath()

C

Cat Socks•4/22/24, 5:26 PM

Has anyone successfully implemented next auth v5 with next-on-pages?

CChaika > considering mostly performance If you're considering mostly performance, that...

P

Pat BranchaudOP•4/23/24, 3:43 AM

FYI, did some testing today and created a nextjs api route that has access to KV and it’s quite fast ~70ms compared to accessing KV directly in runtime edge page ~50ms

S

SM•4/23/24, 4:12 AM

Does anyone have pointers for clearing fetch cache properly when hosting a Nextjs (app router with SSR) on Cloudflare? I'm noticing when testing my pages from various locations/browsers that data is often out of sync. I've been using

revalidateTag

revalidateTag

revalidateTag

revalidateTag to clear fetch cache and it works ~80% of the time. I've narrowed the issue down to locations. If you access the web page from a distant location (via VPN) the data is "stuck" on an older version. Almost like the data cache isn't clearing and propagating, so when accessing the page remotely it loads instantly (seemingly via cache) since it doesn't know about fresh data.

I've posted about this in the community forums (https://community.cloudflare.com/t/nextjs-serving-stale-old-fetch-cache-across-network-how-to-clear-cache/646169/2) but thought I'd try here as well.

SSM Does anyone have pointers for clearing fetch cache properly when hosting a Nextj...

M

matiasjMusante•4/23/24, 9:34 AM

I think you may try with any cache busting technique, so to avoid completely the cache.

"Cache busting is a technique used in web development to ensure that the latest version of a file is fetched from the server, bypassing cached versions. By appending a unique identifier like a version number or timestamp to the file’s URL, the browser treats it as a new resource, fetching the most up-to-date version. This technique prevents users from seeing outdated cached content and improves the overall user experience."

You may, for example, include the timestamp somewhere in the fetch req. so it will be a unique request.

Why are you using revalidateTag? I myself coudnt make options like (cache : "no-store) work, but revalidatePath/revalidateTag, seemed to work... is the same happening to you?

MmatiasjMusante I think you may try with any cache busting technique, so to avoid completely the...

S

SM•4/23/24, 11:36 AM

I'm NOT looking to bypass cache on every request. I want my Nextjs app to fetch new data when cache has been invalidated (via

revalidateTag

revalidateTag

revalidateTag

revalidateTag) and after a stale request has been made. Then, after a fetch, it should cache again. This is standard nextjs functionality and has worked me on Vercel.

Like I said, it's kind of working as expected. But it's not 100% reliable. Old data is appearing in various places (locations/browsers) then getting stuck. So a timestamp won't fix this cos it might make nextjs fetch new data every-time. I don't want that.

I've been using

revalidateTag

revalidateTag

revalidateTag

revalidateTag for years on Vercel. It works great and is a modular way to manage data cache.

The site in question is a news website. Think of it like a blog. You have an index (home) with post titles/summaries, then you have the post pages. What's happening is: a new post is added, I programmatically call

revalidateTag

revalidateTag

revalidateTag

revalidateTag with relevant tags. I then view the page on my browser and refresh it shows the latest post titles on the home page and correct post titles. However, browsers in other locations show old data (even after refresh). And the old data is staying for days. My fetch revalidate is only set to

300

300 seconds (5mins).

It's almost like Cloudflare worker/pages aren't spreading data updates across the rays (datacenter's). As though each ray stores it's own instance of

.next

.next

.next

.next cache. Surely that's not right? Even if it were right, you'd need a way to invalidate cache across all of it, on demand. But I can't find that anywhere.

Sorry to ramble, just hoping I've missed something obvious that's maybe Cloudflare specific.

SSM I'm NOT looking to bypass cache on every request. I want my Nextjs app to fetch ...

O

osa•4/23/24, 3:03 PM

Are you using the Workers KV for caching? https://github.com/cloudflare/next-on-pages/blob/main/packages/next-on-pages/docs/caching.md#workers-kv

P

Pat BranchaudOP•4/23/24, 3:08 PM

Hey Dario, I'm trying to make kv work on local environment. In next.config.mjs I setupDevBindings like https://github.com/cloudflare/next-on-pages/issues/271 but getRequestContext().env.MY_KV; return empty. Do you have an Idea what I'm doing wrong?

GitHub

[⚡ Feature]: Mocking `process.env.` when running `next dev` · Issue...

Wrangler mocks D1 locally with from this file .wrangler/state/..../db.sqlite So I was thinking it would be possible polymorphically get the binding to query that file when developing using next dev...

PPat Branchaud Hey Dario, I'm trying to make kv work on local environment. In next.config.mjs I...

O

osa•4/23/24, 3:40 PM

I think you should define the bindings in

wrangler.toml

wrangler.toml

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

Oosa I think you should define the bindings in `wrangler.toml` : https://github.com/c...

P

Pat BranchaudOP•4/23/24, 4:49 PM

Thank you, I tried that as well, and doesn't work. Did you manage to make it work?

SSM I'm NOT looking to bypass cache on every request. I want my Nextjs app to fetch ...

M

matiasjMusante•4/23/24, 6:19 PM

IF cache busting solves it, you could as well make a custom implementation and call it when/where you need it. I mean, revalidating would give the same effects than creating a "new" fetch (by adding timestamp somewhere, route or headers). Hope someone may explain all this a little bit more or give some clarification/solution (I myself can´t make the cache: no store option to work, and found that only revalidatePath/Tag are the only ways to revalidate a fetch made inside an nextjs project on nexat-on-pages).