What features am I losing moving my next 14 web app from vercel to cloudflare
What features am I losing moving my next 14 web app from vercel to cloudflare
Jhttps://github.com/cloudflare/next-on-pages/blob/main/packages/next-on-pages/docs/supported.md is probably a good place to start for reference
RI've looked around the documentation and am struggling a bit, is there anything extra you need to do to render a Cloudflare function on a path besides create a file in the
but when I run
functionshelloworld.tsbut when I run
npm run dev/helloworld
Jthe functions directory does not work with next-on-pages as we generate our own worker for your app. you should be using nextjs API routes
RThanks! That clears up some confusion for me.
RMe learning Cloudflare pages lol
Jwe're going to park it termporarily because i'm concerned it might interfere with how nextjs fetch caching works, since this is to fix an issue in the react fetch patch which is a layer deeper than the nextjs fetch patch i believe
Jif you want to use the changes in this pr, you can use the prerelease linked in it
Jhttps://prerelease-registry.devprod.cloudflare.dev/next-on-pages/runs/9067847845/npm-package-next-on-pages-771you can change it to
npx https://prerelease-registry.devprod.cloudflare.dev/next-on-pages/runs/9067847845/npm-package-next-on-pages-771sounds good
SDid disabling "smart placement" fix the internal server error for you? I ask as we're having the same issue but we don't have smart placement enabled at all. Wondering if it's something else? Our issue seems to be very random, almost like it's capacity related (too many hits in a short amount of time).
Nyes it did
NHello everyone,
I have a problem uploading my nextjs application in cloudflare using the build command for "normal nextjs" / not static nextjs. I have some dynamic paths / routes where I'm using some server built-in packages (e.g. crypto / http / etc...). Cloudflare requires me to put , while I need "use server" at the top of my page. When trying to build the application on Cloudflare, it gives an errors saying that needs to be async / all functions need to be async.
Is there any solutions to it?
I have a problem uploading my nextjs application in cloudflare using the build command for "normal nextjs" / not static nextjs. I have some dynamic paths / routes where I'm using some server built-in packages (e.g. crypto / http / etc...). Cloudflare requires me to put , while I need "use server" at the top of my page. When trying to build the application on Cloudflare, it gives an errors saying that needs to be async / all functions need to be async.
Is there any solutions to it?
Nyou need to put
export const runtime = "edge";"use server"export const
do i have to put this in every page.tsx / route.ts / layout.tsx ?
do i have to put this in every page.tsx / route.ts / layout.tsx ?
Nevery page.tsx / route.ts that are not static (that use headers, cookies etc)
Nbut you don't need for your server action
LVercel image optimization, log drains for log retention, sentry integration
BI have a Nextjs v14 app on my local machine. I added
When I build and deploy the app using wrangler on my local machine, it picks up the flag and I don't get any node js compatability errors; but the cloud instance didn't pick it up (see attached image). I can manually add this flag using the Cloudflare dashboard, but I would prefer to automate the process in
FIXED: I had to add
wrangler.tomlWhen I build and deploy the app using wrangler on my local machine, it picks up the flag and I don't get any node js compatability errors; but the cloud instance didn't pick it up (see attached image). I can manually add this flag using the Cloudflare dashboard, but I would prefer to automate the process in
wrangler.tomlFIXED: I had to add
compatibility_date = "2024-05-13" to wrangler.toml
Jthe only reason it's shelved is because we dont have tests for testing the fetch cache works properly which would validate that this doesn't interfere with it, and i haven't had time to write any yet or test this myself since i basically married my job
Jnot sure regarding react
SHi, I'm working on a project that uses the pages router but it fails on the Cloudflare Pages build.
I export
I export
runtime = 'experimental-edge on my custom _app but not on the page.tsx itself because I run into missing packages that's related to Firebase Auth. Exporting runtime = 'edge' also doesn't work. Everything works as intended on local development but it breaks on build. Is there anything else I should try?
MMake sure that page.tsx for /posts/[slug] has the export const runtime = ‘edge’
Nadded some asynclocalstorage stuff to my nextjs app, and it gets bundled into the frontend code???
LHey folks, I'm having issues caching fetch requests within Server Components when we deploy to CF Pages. The Next docs mention time-based revalidation, e. g.
This works as expected in dev - the server will only re-fetch 60 seconds after the last fetch occurred. Once we deploy though, each request to the page makes a fetch every time.
Is this where the KV bindings come into play? I don't believe my team set that up.
const users = await fetch(USERS_URL, { next: { revalidate: 60 } }).then(…)This works as expected in dev - the server will only re-fetch 60 seconds after the last fetch occurred. Once we deploy though, each request to the page makes a fetch every time.
Is this where the KV bindings come into play? I don't believe my team set that up.
Rhi team, for better reach reposting an open question here Worker using multiple modules in a single bundle
Basically seeing warnings as ✘ [ERROR] workerd/jsg/_virtual_includes/jsg/workerd/jsg/modules.h:443: warning: NOSENTRY Worker using multiple modules in a single bundle.
Basically seeing warnings as ✘ [ERROR] workerd/jsg/_virtual_includes/jsg/workerd/jsg/modules.h:443: warning: NOSENTRY Worker using multiple modules in a single bundle.
Jcan you open an issue on the next-on-pages github repo please
Jare you using it only in server components? it'll be how nextjs builds your app so im not sure we can do anything about that
LHey @James thanks for getting back to me. I tested deploying a hello world next-on-pages project to see if the same issue occurred and it didn't! The caching works great. So it is definitely something wrong with my company's project setup. One thing I noticed is that we don't have a wrangler.toml -though it's unclear to me how we're deploying without it. Thanks again!
Ji see. that's interesting. you shouldnt need a wrangler.toml for fetch caching to work though...
LO rly. I'll have a look and report back once they grant me access to the account, probably tomorrow
Nthe issue was a bit different
Nwell
Nthe code for it was called
Nbecause
Ni was importing a package
Nthat was importing it somewhere deep
Ni just refactored the pkg
Nso i only import the files i actually need
Jah makes sense
Bhi, how did you solve calling D1 binding? I get an error.
Short explanation including minimum code to reproduce the error: How can I access `env.DB` in my Pages/Worker on production?
Short explanation including minimum code to reproduce the error: How can I access `env.DB` in my Pages/Worker on production?
AI am getting the error
I can reproduce this locally when running npx @Cloudflare/next-on-pages@1 and then using wrangler to do a preview, otherwise this works on local.
The error I was getting before reproducing on local (in my dev cloudflare url) was
The script will never generate a responseI can reproduce this locally when running npx @Cloudflare/next-on-pages@1 and then using wrangler to do a preview, otherwise this works on local.
The error I was getting before reproducing on local (in my dev cloudflare url) was
A hanging Promise was canceled. This happens when the worker runtime is waiting for a Promise from JavaScript to resolve, but has detected that the Promise cannot possibly ever resolve because all code and events related to the Promise's I/O context have already finished.