I saw there is two ways of deploing nextjs to cloudflare - workers and pages. I'm wondering which on
I saw there is two ways of deploing nextjs to cloudflare - workers and pages. I'm wondering which one should I choose and why
RWe're using the official redis-om node library, but get this error which occurs when we add
@James thoughts on this error ?
export const runtime = "edge";@James thoughts on this error ?
Jnext-on-pages works for pages and will continue to receive bug fixes and whatnot, but the future direction centers around the workers adaptor and that is where you'll see more long-term support focused
HError:
[wrangler:inf] Ready on http://localhost:8788
Parsed 1 valid header rule.
Enable Draft Mode:
ā [ERROR] Error: Invariant: previewProps missing previewModeId this should never happen
When:
https://github.com/hsnilsson/nextjs-draftmode-next-on-pages-reproduction
Created a reproduction repo. The last commit (https://github.com/hsnilsson/nextjs-draftmode-next-on-pages-reproduction/commit/be6ca46658ed28007eb35ac9fef72b57c62cb11e) explains the issue more.
[wrangler:inf] Ready on http://localhost:8788
Parsed 1 valid header rule.Enable Draft Mode:
ā [ERROR] Error: Invariant: previewProps missing previewModeId this should never happen
When:
- Trying to activate draft mode in a Nexjs 14.2.15 (current version)
- Using app router and defining edge runtime.
- Works when running locally in dev, but not with next-on-pages (using wrangler pages dev)
https://github.com/hsnilsson/nextjs-draftmode-next-on-pages-reproduction
Created a reproduction repo. The last commit (https://github.com/hsnilsson/nextjs-draftmode-next-on-pages-reproduction/commit/be6ca46658ed28007eb35ac9fef72b57c62cb11e) explains the issue more.
HThis would be super valuable information to have on the top note here: https://developers.cloudflare.com/pages/framework-guides/nextjs/ssr/get-started/
JYou are welcome to make a docs PR if you would like to 
JI have a nextjs app that has a root layout that contains a button that calls a server action. That server action imports a library that is 930 KB (105.65KB zipped) in size.
The issue is that this import is causing my worker to exceed the 1MB limit. When checking on my deployment, the uncompressed size of the worker goes from 3.5MB to 10MB+ just from this import. I would expect it go up by about 1MB when uncompressed, not 7MB.
Since the server action is being imported from within the root layout, it seems to be increasing the size of every page in my app, basically multiplying the the import size of the server action by the number of pages that use the root layout. Is this expected behavior?
The issue is that this import is causing my worker to exceed the 1MB limit. When checking on my deployment, the uncompressed size of the worker goes from 3.5MB to 10MB+ just from this import. I would expect it go up by about 1MB when uncompressed, not 7MB.
Since the server action is being imported from within the root layout, it seems to be increasing the size of every page in my app, basically multiplying the the import size of the server action by the number of pages that use the root layout. Is this expected behavior?
IWhen bundling for Pages, the entire layouts/actions/etc are all bundled into one file.
IIt's just a limitation of how things are deployed... they must be a single file to be deployed as a Worker (or a Pages Function which next-on-pages uses under-the-hood)
IBut it shouldn't multiply (i.e. it should be imported once for everywhere that uses it)
JIt seems to be duplicating the import for every page that uses the layout. I looked at the size for each page/function and each one is increased by 1MB uncompressed, which is the size of the library being imported. This is what brings the total worker size to increase by 7MB uncompressed for the single import
C@koribot you may also check this guide: https://blog.cloudflare.com/javascript-native-rpc/ using service workers (not http resty api needed)
The Cloudflare Blog
Cloudflare Workers now features a built-in RPC (Remote Procedure Call) system for use in Worker-to-Worker and Worker-to-Durable Object communication, with absolutely minimal boilerplate. We've designed an RPC system so expressive that calling a remote service can feel like using a library.
VGoing forward, will
It can almost be thought of as "which is the more vercel-like thing", or "which does Cloudflare want you to use".
next-on-pages@opennextjs/cloudflareIt can almost be thought of as "which is the more vercel-like thing", or "which does Cloudflare want you to use".
HVJust realised the way I wrote "more or less" didn't come across the way I thought it did ("more? or less?"). Anyway, thank you!
Nwas anyone able to upgrade to next@15 and next-on-pages? Seems like something is going wrong now for my app.
Invalid prerender config for xxx
FVCome think of it, the comment you mentioned could be all that needs to be added to the documentation honestly
Zhey y'all... I've recently moved to using cloudflare pages with nextjs 14 instead of vercel. I have a functions folder which isn't being picked up automatically for deployment - is this because each of those folders have their own wrangler.toml?
Zthis isn't a complaint BTW, I prefer this feature. just wandering if that's something I can depend on in future...?
J
TYou shouldn't use
functionsCreate custom request handlers for a given route using the Web's Request and Response APIs.
Hnext-on-pages(or any SSR framework) will generate functions for you, which overrides anything you put in the folder yourself. You need to use Next's API Routes instead of the functions folder
Next.js supports API Routes, which allow you to build your API without leaving your Next.js app. Learn how it works here.
HOh, you meant static Next? Then the functions folder should work fine
MHi i'm struggling to understand how i can fix this error, does anyone know how i can resolve it? sorry im new 
JThat is an error from the Next.js build, so I would recommend making an issue on Next.js repo.
JNext.JS 15 requires nodejs version 18.18.0, but Cloudflare's is 18.17.1
When I change NODE_VERSION env variable, it just does not change it. Anyone knows how to fix this?
When I change NODE_VERSION env variable, it just does not change it. Anyone knows how to fix this?
HWait, so do you mean you want to host your project on a different service?
HThe Edge Runtime is a Worker, if that is what you mean
HNo part of the Cloudflare platform can run full Node in a user-facing way if that is what you mean
ZNot quite my question. I have real workers indirectly associated with the nextjs api handlers written previously. These functions are not being automatically picked up when the build process runs. I'm hoping that this behaviour continues. I don't want to re-write them as NextJS API routes... yet.
TYou should try OpenNext CloudFlare adapter. It allows you to use node runtime but it still has limitations and it's actively being developed
IBit confused what you mean. When deploying a Next.js site with Pages, it won't deploy a Worker alongside it... you can either use Next.js API routes or a worker that's deployed seperately (not in CI). Pages won't deploy the Workers for you.
IIf you mean a function as in Pages Functions then Lewis is correct, the /functions folder is completely ignored when using next-on-pages and you'll have to either move to a Next.js API route or use a seperately deployed Worker.
ZOK great - that clears up my confusion but not yours 
This is by far the best outcome - what wasn't clear is if /functions is ignored or not with next-on-pages. If it is, that's ideal for me though I would love it if I could bundle up CI deployments with specific workers in the /functions folder in the future. More of an 'opt-in'. The reason for this was previously I was using Vercel and hated their edge functions, preferring the Cloudflare workers for mostly everything that wasn't specific to the exact domain I was building in. Now that I'm on Cloudflare for everything I can make this delineation a bit more strict based on application affinity than infrastructure affinity.
This is by far the best outcome - what wasn't clear is if /functions is ignored or not with next-on-pages. If it is, that's ideal for me though I would love it if I could bundle up CI deployments with specific workers in the /functions folder in the future. More of an 'opt-in'. The reason for this was previously I was using Vercel and hated their edge functions, preferring the Cloudflare workers for mostly everything that wasn't specific to the exact domain I was building in. Now that I'm on Cloudflare for everything I can make this delineation a bit more strict based on application affinity than infrastructure affinity.
RDid you get help yet?
TMoving question as I have deployed next on workers...
JIs there a way to use
npm install --force when deploying next to cloudflare pages?JOn vercel, I'm able to override just the install command:
JThat option is not present on cloudflare
KKI'm getting this error. Any solution?
Wconsistently getting it?
K
Wlet me escalate it up
