how would one handle uploading files to R2 from a next.js server action?
how would one handle uploading files to R2 from a next.js server action?
Ti prefer uploading from client after you get the presignedurl
Mnot 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
OI'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 (
I've tried to add the following config settings:
I also tried adding them to
Only way I've been able to get cache headers working for these files is by modifying
Am I missing something or is this the only way to get cache headers working for these images?
public/images) which by default gets no cache (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:
I also tried adding them to
_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 after the build by adding this to the end of the generated file:Am I missing something or is this the only way to get cache headers working for these images?
THey 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!
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!
NI believe all you need is a CNAME pointed to your pages subdomain and adding the domain in the project's settings
NYou can add it using the API too
NThere's a limit of 500 I believe, and no wildcard support yet
NYou could get around that using a worker to proxy it
TThanks, will investigate! I assumed I'd need to sort out the whole cloudflare for saas and all this complicated stuff
Bi have connection timeouts with no logs
BBon next 14.2
@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
Mhaving this issue too randomly after hot reloading.
FIs Vercel dropping support for Edge rendering going to affect next-on-pages?
https://twitter.com/leeerob/status/1780705942734331983
https://twitter.com/leeerob/status/1780705942734331983
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…
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…
4/17/24, 9:12 PM
ISo just keep in mind that this is for vercel.com, not all Vercel sites (which still can and do use edge rendering).
IThat doesn't mean it won't affect next-on-pages, but just to clarify that tweet.
I@fredkisss @vercel This is about Vercel’s usage of Vercel itself. Not your own site code 
4/17/24, 9:31 PM
FOh, I totally misinterpreted that tweet 
Thanks!
Thanks!
KHey 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.
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.
MHello, 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!!
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
Contribute to matimusss/nextcloudflare development by creating an account on GitHub.
M(the "error" is I cant find the way to opt-out of cache using thos options, only with revalidatePath()
CHas anyone successfully implemented next auth v5 with next-on-pages?
PFYI, 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
SDoes 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
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.
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.
MI 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?
"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?
SI'm NOT looking to bypass cache on every request. I want my Nextjs app to fetch new data when cache has been invalidated (via
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
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
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
Sorry to ramble, just hoping I've missed something obvious that's maybe Cloudflare specific.
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 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 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 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 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.
OAre 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
PHey 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
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...
OI think you should define the bindings in
wrangler.toml : https://github.com/cloudflare/next-on-pages/blob/main/internal-packages/next-dev/README.mdPThank you, I tried that as well, and doesn't work. Did you manage to make it work?
MIF 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).
KThe only thing I can think of is that in my page.tsx file I import in a 1mb json file. Could that be whats slowing it down?
KIf not, does anyone else know how to trouble high cpu time? (median is about 150ms for me)
Nyes maybe
OYes, if you want a working example run
npm create cloudflare@latest select "Website or web app" and "Next". Uncomment the KV section in wrangler.toml and app/api/hello/route.ts. start dev server npm run dev and visit http://localhost:3000/api/hello . If that works for you, then check that you have all the needed packages and correct versions (wrangler & @cloudflare/next-on-pages) etc.
Ahttps://github.com/iflamed/hono-react-ssr-shadcn-ui
Sharing this cool project that I found on Hono discord server
All credits to the author
Sharing this cool project that I found on Hono discord server
All credits to the author
GitHub
Template code for Honojs with React SSR and Shadcn-UI which running on Cloudflare Pages. - iflamed/hono-react-ssr-shadcn-ui
AWas investigating to find out why my site was slow in some pages, then today I finally found out why. For some reason making CF cache resulting pages at the edge (by using a Cache Rule) doesn't play well with page streaming: the page is returned only when Next is done rendering the whole page, so TTFB becomes a second and a half instead of milliseconds. Is this a known issue? Is there a config I can operate to have both CF cache and page streaming when not primed?
SYou are a bloody legend. This fixed every weird cache issue we were facing 
Can't thank you enough. I owe you a beer/coffee. Seriously. I think this is important information for Nextjs devs coming from Vercel where distributed, fast caching is the norm, so I've suggested an edit to the framework guide (https://github.com/cloudflare/cloudflare-docs/issues/14231).
Can't thank you enough. I owe you a beer/coffee. Seriously. I think this is important information for Nextjs devs coming from Vercel where distributed, fast caching is the norm, so I've suggested an edit to the framework guide (https://github.com/cloudflare/cloudflare-docs/issues/14231).GitHub
Cloudflare’s documentation. Contribute to cloudflare/cloudflare-docs development by creating an account on GitHub.
FIt looks like I cant use React Server Components with Cloudflare Pages and Nextjs right? At least not If I try to use D1. I need to call
getRequestContext() on the edge and I can only set export const runtime = "edge"; within an api route, right? (Nextjs 14)Tthat's not true, you can export that const in a layout file and that will affect all pages within it
Tactually I do export that const in various places like my D1 functions folder
Fdo you use
and thanks for the hint with the layout, I didn't try that one
use server within the files in your D1 folder? and thanks for the hint with the layout, I didn't try that one
TI only use "use server" for server actions, and I use server actions when I need to fetch or update data from client components. Since I cannot use D1 bindings directly from client components, I use server actions to forward requests to the file that interacts with D1.
Server actions are all exported functions that you have in a file that begins with the "use server" directive, and adding this directive at the top of the file means that you cannot export any other thing except for async functions, not even the "export const runtime = 'edge'" - so they have this limitation, which I believe is intented.
Server actions are all exported functions that you have in a file that begins with the "use server" directive, and adding this directive at the top of the file means that you cannot export any other thing except for async functions, not even the "export const runtime = 'edge'" - so they have this limitation, which I believe is intented.
Ftysm! I think I didnt understand how all these pieces work together, now I've managed to call my d1 db without any problems. I really really appreciate it your explanation cleared it for me
TI'm glad to be helpful!
GHey! Anyone aware if I could use Cache API (caches.default) in next-on-pages project's middleware file?
Cno, pages bundles it all into a single worker file, and the limit is on that
Mhmmmm kk
