RHow can I cache requests made inside getServerSideProps?
I'm passing the reponse headers to the client and I'm getting this:
I'm passing the reponse headers to the client and I'm getting this:
RActually this seems to be related to the fact that the built in next caching doesn't work on pages router, and I'm using pages router. But still, using the custom cf options isn't working either
JI believe they won't work due to how Next.js patches fetch requests
RBut from what I'm reading, I don't think they mess with fetch requests unless you are using the app router
RI could be wrong though
JPages does not currently support image resizing in the worker, so we are unable to do it on the server and instead act as a proxy for the image at the moment. You could use a custom loader to use Cloudflare image resizing if you wanted
AThat sounds like a good open source project
FHi, I come with a question. Is it possible not to use next-on-pages to prepare and deploy a Next.js app to CF Pages? Currently, I am using TurboRepo to take advantage of the build cache, which literally happens in seconds. However, for adapting the app to be well interpreted by CF Pages, I have to use next-on-pages and practically lose all the time advantage provided by TurboRepo.
Is there any example of how to deploy a Next.js app manually without using next-on-pages?
Is there any example of how to deploy a Next.js app manually without using next-on-pages?
JI don't understand why you can't use turborepo at the same time as next-on-pages?
FBecause that causes the app to build twice, I am looking to see if it is possible to eliminate one of them
JAh, I see what you mean, although I think you're confusing things a little with what is next-on-pages' fault. We spawn the Vercel CLI to build the app, and it's the Vercel CLI that is running
yarn run build to build the Next.js app.JMaybe one of your listed outputs for
build is changing if yarn run build is supposed to go through turbo. In either case, it's out of our control since this is something that is run in the Vercel CLI instead.FI understand, it makes sense to me. Thank u very much for your response!
Ais there some kind of limitation on making http requests from a worker? I have nextjs app that i am using next-on-pages for; it has an api that gets deployed to workers that calls a graphql endpoint. it works fine locally, and using wrangler, but when deployed i get an error ApolloError: Unexpected token '<', "<html><hea"... is not valid JSON
SYour api url might be wrong in workers
Ait's hard coded in my code, not an env variable
Aoh, it also works fine on the build. the same URL endpoint is called on the cloudflare build
Aso cloudflare can access that API fine on its build servers, just not from a worker
USounds like the request is probably getting blocked by the API
Ait's a wordpress instance that i host, so i doubt it
Ajust worked out from help in #workers-discussion that it's my hosting provider putting a captcha up
Aas a rubbish work around I could at build time generate a static file with data from the endpoint and use that from the worker, but that's a bad solution
DYou can also use wasm to optimise images by creating an api route.
DThank you
Dsorry big n00b, what do you mean exactly by this? using a cloudflare worker from the api route that uses wasm or? would be super interested to learn more if you have a blog or link to point to
Dsuper interesting! thank you for the snippet and reply sir, and had no idea about
i noticed you import from
anyways, appreciate the insight!
wasm-image-optimization ,i noticed you import from
/edge but in the docs it shows a import { optimizeImage } from 'wasm-image-optimization'; for cloudflare, which is curious to me since my understanding was all cloudflare workers are mandatory edge?anyways, appreciate the insight!
DIn next js build, wasm binaries are resolved by webpack when they are imported with parameter ?module but Cloudflare workers doesn't need it (both *.wasm and *.wasm?module are resolved)
The package was recently updated, you should use
The package was recently updated, you should use
wasm-image-optimization/next if you are using it in next.js project and wasm-image-optimization for workers
BDoes next on pages always staticly build or how do I get mine to not do this lmao
JOpt your route into the edge runtime and it will be SSR'd
LI'm deploying a NextJS app via a page and a worker. How can I configure both my page and worker to be served on the same subdomain? (E.g.
staging.mydomain.com)LAlso, do I have to add a custom domain and route to a worker, or just one? (which one?)
JI don't understand the question. next-on-pages builds a worker for your Pages project, and it should all be deployed to one Pages project
LWhat I mean is that the frontend is deployed as a page (static) while the backend code is deployed as a worker.
Can both be served from the same subdomain? (If yes, how?)
Can both be served from the same subdomain? (If yes, how?)
JAh so you're not using next-on-pages? In that case it'd probably be better to ask in pages-help or workers-and-pages-help
JIf you were using next-on-pages, the suggestion would be to move your backend logic to Next.js API routes/equivalent to achieve your use case.
LI'm deploying nextjs on cloudflare, my project is based on this template https://github.com/timothymiller/t4-app/tree/lucia.
And yes, the backend logic is using Next.js API routes.
The question is, how can I make both my frontend and backend be served on the same subdomain on cloudflare? Do I have to add the subdomain to both? Then what should the route be?
And yes, the backend logic is using Next.js API routes.
The question is, how can I make both my frontend and backend be served on the same subdomain on cloudflare? Do I have to add the subdomain to both? Then what should the route be?
JIf you're using Next.js API routes, you should be using
From the looks of things, that repo does not use Next.js API routes. It looks like it has a static Next.js app to deploy as it's own Pages project, and a separate API that is deployed as a worker that the static Next.js app makes API calls to. Looking at it, not sure I would recommend doing what they do if you wanted a full-stack Next.js app. That repo looks designed to have a separate place for your API, whereas if you wanted the API in the same place as everything else, you would be doing a full-stack Next.js app that should use next-on-pages.
In either case, I would suggest using one of the other help channels if you want to know about using the same subdomain for a workers project and a pages project, since this channel is specifically for next-on-pages related stuff.
@cloudflare/next-on-pagesFrom the looks of things, that repo does not use Next.js API routes. It looks like it has a static Next.js app to deploy as it's own Pages project, and a separate API that is deployed as a worker that the static Next.js app makes API calls to. Looking at it, not sure I would recommend doing what they do if you wanted a full-stack Next.js app. That repo looks designed to have a separate place for your API, whereas if you wanted the API in the same place as everything else, you would be doing a full-stack Next.js app that should use next-on-pages.
In either case, I would suggest using one of the other help channels if you want to know about using the same subdomain for a workers project and a pages project, since this channel is specifically for next-on-pages related stuff.
Lah ok, I hadn't heard of @cloudflare/next-on-pages before.. Does it work with the pages router or just with the app router way of structuring a nextjs app?
JIt works with both pages and app router
Dwow fascinating and had no idea, thank you again for the information sir!!
DI deployed it on Cloudflare pages
https://themes.fineshopdesign.com/api/image?url=%2Flogos%2Flogo-512x512.png&w=260&q=75&f=webp
https://themes.fineshopdesign.com/api/image?url=%2Flogos%2Flogo-512x512.png&w=260&q=75&f=webp
DIs it possible to access ExecutionContext in next js api route? So that I can call methods like ctx.waitUntil([promise]);
JStill waiting on Dario's team to come to an agreement on how it should be exposed to devs
BHow would I do this, im not really familiar
