Hey what are some good solutions to reducing the bundle size? I've got maybe a small to medium sized

Hey what are some good solutions to reducing the bundle size? I've got maybe a small to medium sized dashboard in NextJS and we just hit the 25mb limit and now we are pretty stuck. Support didn't really help or tell me anything obvious.

I'm pretty stuck right now, it's rights on the limit. I'd easily pay the Pro plan price if that doubled or 4x that limit. I don't know what else I can do in the next config file to reduce imports, I've tried heaps with transpile and optimizePackageImports: [] to not avail

Screenshot_2024-12-12_at_11.16.22_AM.png

Screenshot_2024-12-12_at_11.17.46_AM.png

Saurav Panda•12/12/24, 6:03 AM

Would love help with same on how we can build and upload the files to cloudflare?

MMick Hey what are some good solutions to reducing the bundle size? I've got maybe a s...

Pierre•12/12/24, 6:32 AM

I guess they are referring to their docs but not really helpful, yeah https://developers.cloudflare.com/pages/platform/limits/#file-size

MMick Hey what are some good solutions to reducing the bundle size? I've got maybe a s...

num•12/12/24, 7:14 AM

depends really on what kind of data you're bundling. Do you have more insights on what your app does and what the big sized stuff is?

MMick Hey what are some good solutions to reducing the bundle size? I've got maybe a s...

DarkDeviL•12/12/24, 7:16 AM

Is this being caused alone by the "/webpack//webpack/" directory?

A similar conversation conversation was made around general-discussions which happened just about 2 hours before your message here, it sounds like you shouldn't be uploading the contents from "/webpack//webpack/", as that isn't something your visitors will be using at all.

Do you have a "dist/dist/" or "build/build/" directory?

cj•12/12/24, 9:31 AM

Will react cache work on next-on-pages?

It is a server side function to cache results. Used in react server components.

cache – React

The library for web and native user interfaces

cakeee•12/12/24, 11:15 AM

my nextjs app works fine when running locally and on preview as well but when deployed it only shows "application error happened on client side" and theres nothing in console either

How do i debug this?

Mmakisuo ```tsx 00:08:56.974 Detected the following tools from environment: bun@1.1.4,...

Tenshi•12/14/24, 4:43 PM

did u manage to make this work? im trying to make a next on pages project with bun on a workspace, but it keeps using npm i

TTenshi did u manage to make this work? im trying to make a next on pages project with b...

makisuo•12/14/24, 6:55 PM

Set bun as your package manager in your package.json and add bun install to your build step

Mmakisuo Set bun as your package manager in your package.json and add bun install to your...

Tenshi•12/15/24, 2:49 AM

oh ok. thanks for replying

MMick Hey what are some good solutions to reducing the bundle size? I've got maybe a s...

James•12/16/24, 9:03 AM

Barrel files are normally a big offender

ejcx•12/17/24, 5:15 PM

Hi, random question, is __NEXT_INCREMENTAL_CACHE_IPC_KEY__NEXT_INCREMENTAL_CACHE_IPC_KEY sensitive? It says "key" and looks random so I imagine it could be... but I'm not sure what it would be for. I don't see it documented anywhere but I see it in

process.env

process.env

Eejcx Hi, random question, is `__NEXT_INCREMENTAL_CACHE_IPC_KEY` sensitive? It says "k...

ejcx•12/17/24, 7:39 PM

Actually, I assumed this was a Cloudflare Pages thing, but there's nothing indicating it is. It's probably just an internal next thing, so I'm asking in the wrong place.

Paul•12/18/24, 3:51 AM

Using Nextjs and defining route endpoints, I realized all these route endpoints need to be using the edge runtime. I can't seem to use the nodejs runtime like with workers when using next-on-pages. Is this correct? Can someone confirm? It seems like I need to separate my frontend and backend so next-on-pages mainly loads the nextjs frontend app and server actions whereas my backend needs to be written in my case in honojs and as a cloudflare worker deployment OUTSIDE of nextjs route endpoints (otherwise next-on-pages will try to build the route endpoints on pages and it'll require edge runtime). Is that correct?

Paul•12/18/24, 3:52 AM

tldr; cloudflare next-on-pages 100% needs edge runtime. There is no way to put nextjs route endpoints on cloudflare workers using nodejs runtime when using next-on-pages right?

James•12/18/24, 11:52 AM

Correct, next-on-pages only works with either prerendered routes or edge-runtime routes

Rabid•12/19/24, 9:13 PM

Anyone have a good way to make my preview deployments use a different .env file? So .env.production for production and .env.staging or .env.preview for preview?

Victor Berchet•12/20/24, 4:09 PM

We have just released @opennextjs/cloudflare 0.3.0

Thanks to everybody who made that possible, from cloudflare and the community.
Kudos to @Dario @petebd @conico974 @James and everybody that submitted PRs and reported feeback

The docs have been updated for the released at https://opennext.js.org/cloudflare, including a migration guide from 0.2.
0.3 supports middleware, loading .env* files, ... It includes quite a few bug fixes and improvements.
Please test this new release and report feedback!

Happy holiday season

Check the Open Next discord for more info about Next on Workers https://discord.gg/opennextjs

Index - OpenNext

Open-source Next.js adapters

NZX•12/23/24, 8:06 PM

Hello, i am looking for help,

I am making a website builder, and I made a "publish" button that deploys the users website into cloudflare but I am having issues.

Basically when I press Publish, I have a big function that turns my node tree of the builder into a next js project (creates component, creates app folder, src etc..), then I need it to automatically deploy that project to a new Pages or Worker. How can i proceed ? Thank you!

NZX•12/23/24, 8:39 PM

I have succeeded with wrangler, but I found that I can only upload a next project to a Pages is that true ? I cannot do it onto a Worker ?

NNZX I have succeeded with wrangler, but I found that I can only upload a next projec...

dapperdandev•12/24/24, 7:50 PM

I successfully uploaded an AngularJS (yes, the really old one) project both with wrangler and drag/drop in the UI. I don't know anything about next.js. I had to build first and upload the output. Sounds like you might be trying to upload the source files?

Ddapperdandev I successfully uploaded an AngularJS (yes, the really old one) project both with...

NZX•12/24/24, 8:01 PM

I succeeded . I build the next js internally then outputted the build files

koribot•12/25/24, 4:41 AM

Hello, will dynamic routes be supported in the near future?

VVictor Berchet We have just released @opennextjs/cloudflare 0.3.0 🎉 Thanks to everybody who ma...

Baran•12/25/24, 1:06 PM

Congrats on the release!

Is there a v1 / version 1 roadmap and ETA for opennextjs-cloudflare?

BBaran Congrats on the release! Is there a v1 / version 1 roadmap and ETA for opennext...

Victor Berchet•12/27/24, 5:46 PM

The plan is to add more tests early January.
This will give us visibility on what remains to be done before we cut v1 - we will then publish an ETA.
Hopefully only a few weeks away.

cj•12/28/24, 5:58 AM

How do I make the image assets (static assets - inside public directory) load faster?

If you check my website - https://sendbetter.co

you can see it took a second to load the hero images.

Ccj How do I make the image assets (static assets - inside public directory) load fa...

Hard@Work•12/28/24, 6:17 AM

For me, the images load pretty quickly. Per Page-Speed Insights, you could resize images for different display sizes, and convert to more efficient formats, but your biggest issue seems to just be that your initial page load is slow

Hard@Work•12/28/24, 6:17 AM

That and, you may be running your Functions in front of your assets?

HHard@Work That and, you may be running your Functions in front of your assets?

cj•12/28/24, 6:19 AM

I am using next-on-pages. I am not running workers directly and I don't know how next-js logic translate to cf worker logic.

So I really don't know what you mean by "running your Functions in front of your assets". Sorry, can you tell me what you mean?

HHard@Work For me, the images load pretty quickly. Per Page-Speed Insights, you could resiz...

cj•12/28/24, 6:20 AM

Ty, will add smaller assets and use the right sized image for different display sizes

Ccj I am using next-on-pages. I am not running workers directly and I don't know how...

Hello, I’m Allie!•12/28/24, 7:13 AM

Basically, you can tell Pages to skip Next and serve your assets directly. Afaik for Next specifically, this can break pre-rendered pages, but for assets, it should

be fine

HHello, I’m Allie!Basically, you can tell Pages to skip Next and serve your assets directly. Afaik...

cj•12/28/24, 7:49 AM

Oh, how do I do that?

cj•12/28/24, 8:01 AM

next-on-pages automatically creates

_routes.json

_routes.json

and my public folder is already excluded

{
  "version": 1,
  "description": "Built with @cloudflare/next-on-pages@1.13.7.",
  "include": ["/*"],
  "exclude": ["/_next/static/*"]
}

{
  "version": 1,
  "description": "Built with @cloudflare/next-on-pages@1.13.7.",
  "include": ["/*"],
  "exclude": ["/_next/static/*"]
}

(if this is what you mean)
link to docs - https://developers.cloudflare.com/pages/framework-guides/nextjs/ssr/static-assets/

Cloudflare Docs

Routing static assets | Full-stack (SSR) | Next.js apps · Cloudflar...

When you use a JavaScript framework like Next.js on Cloudflare Pages, the framework adapter (ex: @cloudflare/next-on-pages) automatically generates a _routes.json file, which defines specific paths of your app's static assets. This file tells Cloudflare, for these paths, don't run the Worker, you can just serve the static asset on this path (an ...

Ccj next-on-pages automatically creates `_routes.json` and my public folder is alrea...

Hello, I’m Allie!•12/28/24, 8:10 AM

Yeah, then you should be good on that front

Hello, I’m Allie!•12/28/24, 8:10 AM

Couldn’t remember whether Next did it automatically or not

PRO•12/28/24, 10:59 AM

Hi good afternoon, I wanted to know if there's a way we can cache node_modules and node as well for builds.
I have a NextJs app which I'm deploying as static. I have enabled build cache but that only optimizing next build and still installs deps on each build.
Thank you!

segfault•12/28/24, 2:50 PM

does next on pages allow you to have a /functions dir in the project root as well?

lyn•12/28/24, 4:40 PM

does a request to one of my static pages count against my worker invocations?

Ssegfault does next on pages allow you to have a /functions dir in the project root as wel...

Hello, I’m Allie!•12/28/24, 5:30 PM

Nope, you have to use Next’s API Routes

Llyn does a request to one of my static pages count against my worker invocations?

Hello, I’m Allie!•12/28/24, 5:30 PM

Yes, as next-on-pages requires itself to be run on all Pages, regardless of whether they are pre-rendered or not

Hello, I’m Allie!•12/28/24, 5:31 PM

Unless your entire project is pre-rendered, but then you don’t actually need next-on-pages

lyn•12/28/24, 5:31 PM

alright

lyn•12/28/24, 5:31 PM

lyn•12/28/24, 5:46 PM

is it possible to use customer domains with next-on-pages, and if so, how do i do it? like if i want to allow people to register their own domains to be used for my multi-tenant nextjs project

HHello, I’m Allie!Nope, you have to use Next’s API Routes

segfault•12/28/24, 6:39 PM

man thats a bummer okay i guess i make a seperate repo

Ssegfault man thats a bummer okay i guess i make a seperate repo

Hello, I’m Allie!•12/28/24, 6:57 PM

Not sure I understand, why can’t you use Next’s own thing?

segfault•12/28/24, 10:34 PM

the site's just already on next and I intend to migrate it away from next

segfault•12/28/24, 10:34 PM

I want my serverside api to be seperate and with less overhead

useless•12/28/24, 11:32 PM

Hi guys, hope all is doing great!
I want to host my nextjs app and was looking between Cloudflare and Netlify. The app contains dynamic pages and has a huge bandwidth. Is it possible to do so and what are the pros and cons of hosting on Cloudflare? I am asking only for Cloudflare since the website is currently hosted on Netlify and I am on the pro tier, but this is the refactored website that I want to deploy.

gnanesh•12/30/24, 12:03 PM

Hey, are server actions supported in next-on-pages? I'm getting the 405 method error, but the documentation states that it does support https://developers.cloudflare.com/pages/framework-guides/nextjs/ssr/supported-features/. Does anyone have a sample working code reference that I can review?

Also, is Next.js 14 supported? I see that Cloudflare only supports Next.js up to version 13 in online forums.

Cloudflare Docs

Supported features · Cloudflare Pages docs

@cloudflare/next-on-pages supports all minor and patch version of Next.js 13 and 14. We regularly run manual and automated tests to ensure compatibility.

Hey what are some good solutions to reducing the bundle size? I've got maybe a small to medium sized

Similar Threads

Similar Threads

Similar Threads