next-on-pages works for pages and will continue to receive bug fixes and whatnot, but the future dir

H

hsnilsson•10/15/24, 8:28 AM

Error:
[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)

Reproduce:
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.

JJames next-on-pages works for pages and will continue to receive bug fixes and whatnot...

H

hsnilsson•10/15/24, 9:29 AM

This would be super valuable information to have on the top note here: https://developers.cloudflare.com/pages/framework-guides/nextjs/ssr/get-started/

J

JamesOP•10/16/24, 2:58 PM

You are welcome to make a docs PR if you would like to

J

Jon•10/16/24, 11:33 PM

I 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?

JJon I have a nextjs app that has a root layout that contains a button that calls a s...

I

Isaac McFadyen•10/17/24, 3:32 AM

When bundling for Pages, the entire layouts/actions/etc are all bundled into one file.

I

Isaac McFadyen•10/17/24, 3:33 AM

It'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)

I

Isaac McFadyen•10/17/24, 3:33 AM

But it shouldn't multiply (i.e. it should be imported once for everywhere that uses it)

IIsaac McFadyen But it shouldn't *multiply* (i.e. it should be imported once for everywhere that...

J

Jon•10/17/24, 4:09 AM

It 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

Constantin•10/19/24, 11:30 AM

@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

We've added JavaScript-native RPC to Cloudflare Workers

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.

V

veeque•10/22/24, 1:21 PM

Going forward, will

next-on-pages

next-on-pages

next-on-pages

next-on-pages be recommended more or less over

@opennextjs/cloudflare

@opennextjs/cloudflare

@opennextjs/cloudflare

@opennextjs/cloudflare? Besides some very minute things, I cannot really find any meaningful difference between the two, so I'm wondering which one is better and why.

It can almost be thought of as "which is the more vercel-like thing", or "which does Cloudflare want you to use".

Vveeque Going forward, will `next-on-pages` be recommended more or less over `@opennextj...

H

hsnilsson•10/22/24, 4:20 PM

next-on-pages seems like the other way around. Definitely could be better documented though.

V

veeque•10/22/24, 5:14 PM

Just realised the way I wrote "more or less" didn't come across the way I thought it did ("more? or less?"). Anyway, thank you!

N

num•10/22/24, 5:30 PM

was 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

F

fry69•10/22/24, 5:31 PM

Next.js 15 is pretty fresh -> https://nextjs.org/blog/next-15

Hhsnilsson https://discord.com/channels/595317990191398933/1135899572141568050/129565327027...

V

veeque•10/22/24, 6:06 PM

Come think of it, the comment you mentioned could be all that needs to be added to the documentation honestly

Z

zemonstas•10/23/24, 4:35 AM

hey 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?

Z

zemonstas•10/23/24, 4:35 AM

this isn't a complaint BTW, I prefer this feature. just wandering if that's something I can depend on in future...?

J

Jakov•10/23/24, 10:11 AM

Can anyone help me with pages-help ? If I don't do it soon I might lose my job

Zzemonstas hey y'all... I've recently moved to using cloudflare pages with nextjs 14 instea...

T

tadhglewis•10/23/24, 12:59 PM

You shouldn't use

functions

functions

functions

functions folder. Instead you should use standard NextJS API handlers: https://nextjs.org/docs/app/building-your-application/routing/route-handlers

Routing: Route Handlers | Next.js

Create custom request handlers for a given route using the Web's Request and Response APIs.

Ccardyet Anyone have a guide of how to use the functions folder with nextjs on pages, I c...

H

Hello, I’m Allie!•10/23/24, 2:28 PM

next-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

Routing: API Routes | Next.js

Next.js supports API Routes, which allow you to build your API without leaving your Next.js app. Learn how it works here.

Ccardyet ahh, but that then will use the next edge runtime I think so we have this node m...

H

Hello, I’m Allie!•10/23/24, 6:14 PM

Oh, you meant static Next? Then the functions folder should work fine

M

mokka 🍘•10/23/24, 7:19 PM

Hi i'm struggling to understand how i can fix this error, does anyone know how i can resolve it? sorry im new

J

JamesOP•10/23/24, 7:42 PM

That is an error from the Next.js build, so I would recommend making an issue on Next.js repo.

J

Jakov•10/23/24, 7:46 PM

Next.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?

Ccardyet nope, not static, but I want to use workers alongside. The problem, I'm pretty s...

H

Hello, I’m Allie!•10/23/24, 7:48 PM

Wait, so do you mean you want to host your project on a different service?

Ccardyet sorry, totally not explaining myself well. I want to deploy a Full-stack applica...

H

Hello, I’m Allie!•10/23/24, 10:06 PM

The Edge Runtime is a Worker, if that is what you mean

H

Hello, I’m Allie!•10/23/24, 10:06 PM

No part of the Cloudflare platform can run full Node in a user-facing way if that is what you mean

Ttadhglewis You shouldn't use `functions` folder. Instead you should use standard NextJS API...

Z

zemonstas•10/24/24, 12:10 AM

Not 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.

Ccardyet sorry, totally not explaining myself well. I want to deploy a Full-stack applica...

T

tadhglewis•10/24/24, 12:17 AM

You should try OpenNext CloudFlare adapter. It allows you to use node runtime but it still has limitations and it's actively being developed

Zzemonstas Not quite my question. I have real workers indirectly associated with the nextjs...

I

Isaac McFadyen•10/24/24, 1:16 AM

Bit 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.

I

Isaac McFadyen•10/24/24, 1:17 AM

If 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.

Z

zemonstas•10/24/24, 2:56 AM

OK 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.

JJakov Can anyone help me with <#1063191651796914276> ? If I don't do it soon I might l...

R

R in Tokyo•10/24/24, 5:09 AM

Did you get help yet?

T

Ted•10/24/24, 11:12 AM

Moving question as I have deployed next on workers...

J

Jon•10/24/24, 8:20 PM

Is there a way to use

npm install --force

npm install --force

npm install --force

npm install --force when deploying next to cloudflare pages?

J

Jon•10/24/24, 8:21 PM

On vercel, I'm able to override just the install command:

J

Jon•10/24/24, 8:22 PM

That option is not present on cloudflare

K

Khagan•10/24/24, 8:24 PM

23:16:38.104    Cloning repository...
23:16:39.261    From https://github.com/kaankutan/kutan.dev
23:16:39.261     * branch            93d203ed7a7c38795b849e34333e737c69d76c0d -> FETCH_HEAD
23:16:39.261    
23:16:39.305    HEAD is now at 93d203e Image optimization added
23:16:39.306    
23:16:39.390    
23:16:39.391    Using v2 root directory strategy
23:16:39.417    Success: Finished cloning repository files
23:17:32.083    Failed: an internal error occurred. If this continues, contact support: https://cfl.re/3WgEyrH
23:17:32.083    Error: Failed to publish assets. For support, join our Discord (https://discord.gg/cloudflaredev) or create a ticket and reference the deployment ID: 755daaa4-ad45-428f-be89-84e3a2857977

23:16:38.104    Cloning repository...
23:16:39.261    From https://github.com/kaankutan/kutan.dev
23:16:39.261     * branch            93d203ed7a7c38795b849e34333e737c69d76c0d -> FETCH_HEAD
23:16:39.261    
23:16:39.305    HEAD is now at 93d203e Image optimization added
23:16:39.306    
23:16:39.390    
23:16:39.391    Using v2 root directory strategy
23:16:39.417    Success: Finished cloning repository files
23:17:32.083    Failed: an internal error occurred. If this continues, contact support: https://cfl.re/3WgEyrH
23:17:32.083    Error: Failed to publish assets. For support, join our Discord (https://discord.gg/cloudflaredev) or create a ticket and reference the deployment ID: 755daaa4-ad45-428f-be89-84e3a2857977

23:16:38.104    Cloning repository...
23:16:39.261    From https://github.com/kaankutan/kutan.dev
23:16:39.261     * branch            93d203ed7a7c38795b849e34333e737c69d76c0d -> FETCH_HEAD
23:16:39.261    
23:16:39.305    HEAD is now at 93d203e Image optimization added
23:16:39.306    
23:16:39.390    
23:16:39.391    Using v2 root directory strategy
23:16:39.417    Success: Finished cloning repository files
23:17:32.083    Failed: an internal error occurred. If this continues, contact support: https://cfl.re/3WgEyrH
23:17:32.083    Error: Failed to publish assets. For support, join our Discord (https://discord.gg/cloudflaredev) or create a ticket and reference the deployment ID: 755daaa4-ad45-428f-be89-84e3a2857977

23:16:38.104    Cloning repository...
23:16:39.261    From https://github.com/kaankutan/kutan.dev
23:16:39.261     * branch            93d203ed7a7c38795b849e34333e737c69d76c0d -> FETCH_HEAD
23:16:39.261    
23:16:39.305    HEAD is now at 93d203e Image optimization added
23:16:39.306    
23:16:39.390    
23:16:39.391    Using v2 root directory strategy
23:16:39.417    Success: Finished cloning repository files
23:17:32.083    Failed: an internal error occurred. If this continues, contact support: https://cfl.re/3WgEyrH
23:17:32.083    Error: Failed to publish assets. For support, join our Discord (https://discord.gg/cloudflaredev) or create a ticket and reference the deployment ID: 755daaa4-ad45-428f-be89-84e3a2857977

K

Khagan•10/24/24, 8:25 PM

I'm getting this error. Any solution?

KKhagan ``` 23:16:38.104 Cloning repository... 23:16:39.261 From https://github.co...

W

Walshy•10/24/24, 8:29 PM

consistently getting it?

WWalshy consistently getting it?

K

Khagan•10/24/24, 8:29 PM

W

Walshy•10/24/24, 8:29 PM

let me escalate it up

K

Khagan•10/24/24, 9:06 PM

To test it, I pushed a different commit without changing anything. It is running now. Intersting. @Walshy

D

Donda•10/24/24, 9:16 PM

Hey everyone does anyone know where can I read about multi tenant project with cloud flare and nextjs

next-on-pages works for pages and will continue to receive bug fixes and whatnot, but the future dir

Similar Threads

Similar Threads

Similar Threads