Cloudflare Developers•2y ago

Your api url might be wrong in workers

Ssubscriptions Your api url might be wrong in workers

Andrew Murphy•12/29/23, 4:41 AM

it's hard coded in my code, not an env variable

Andrew Murphy•12/29/23, 4:43 AM

oh, it also works fine on the build. the same URL endpoint is called on the cloudflare build

Andrew Murphy•12/29/23, 4:44 AM

so cloudflare can access that API fine on its build servers, just not from a worker

Unsmart•12/29/23, 4:50 AM

Sounds like the request is probably getting blocked by the API

Andrew Murphy•12/29/23, 4:52 AM

it's a wordpress instance that i host, so i doubt it

Andrew Murphy•12/29/23, 5:04 AM

just worked out from help in #workers-discussion that it's my hosting provider putting a captcha up

Andrew Murphy•12/29/23, 5:10 AM

as 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

CChris Hi all, When I deploy the Next.js application directly on the cloud server, the ...

Deo Kumar•12/29/23, 3:54 PM

You can also use wasm to optimise images by creating an api route.

JJames [cf-bindings-proxy](https://github.com/james-elicx/cf-bindings-proxy) supports t...

Deo Kumar•12/29/23, 3:55 PM

Thank you

DDeo Kumar You can also use wasm to optimise images by creating an api route.

Donnager•12/29/23, 6:54 PM

sorry 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

DDonnager sorry big n00b, what do you mean exactly by this? using a cloudflare worker from...

Deo Kumar•12/30/23, 3:09 AM

You can try this.
Or you can write it in workers and add images.path

IMAGE.txt2.14KB

DDeo Kumar You can try this. Or you can write it in workers and add images.path

Donnager•12/30/23, 8:39 PM

super interesting! thank you for the snippet and reply sir, and had no idea about

wasm-image-optimization

wasm-image-optimization

,

i noticed you import from

/edge

/edge

but in the docs it shows a

import { optimizeImage } from 'wasm-image-optimization';

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!

DDonnager super interesting! thank you for the snippet and reply sir, and had no idea abou...

Deo Kumar•12/31/23, 4:32 AM

In 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

wasm-image-optimization/next

wasm-image-optimization/next

if you are using it in next.js project and

wasm-image-optimization

wasm-image-optimization

for workers

Befus•12/31/23, 4:27 PM

Does next on pages always staticly build or how do I get mine to not do this lmao

James•12/31/23, 4:28 PM

Opt your route into the edge runtime and it will be SSR'd

localλorse•12/31/23, 4:34 PM

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

staging.mydomain.com

)

localλorse•12/31/23, 4:34 PM

Also, do I have to add a custom domain and route to a worker, or just one? (which one?)

James•12/31/23, 4:36 PM

I 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

JJames I don't understand the question. next-on-pages builds a worker for your Pages pr...

localλorse•12/31/23, 4:37 PM

What 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?)

James•12/31/23, 4:38 PM

Ah 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

James•12/31/23, 4:39 PM

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

JJames Ah so you're not using next-on-pages? In that case it'd probably be better to as...

localλorse•12/31/23, 4:40 PM

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

James•12/31/23, 4:49 PM

If you're using Next.js API routes, you should be using

@cloudflare/next-on-pages

@cloudflare/next-on-pages

when building the application, which builds a your Next.js app in a format that can be deployed as a full-stack app on Cloudflare Pages. There should be not be a separate worker from your Pages project if you're using Next.js API routes.

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.

JJames If you're using Next.js API routes, you should be using `@cloudflare/next-on-pag...

localλorse•12/31/23, 4:57 PM

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

James•12/31/23, 4:58 PM

It works with both pages and app router

DDeo Kumar In next js build, wasm binaries are resolved by webpack when they are imported w...

Donnager•12/31/23, 6:31 PM

wow fascinating and had no idea, thank you again for the information sir!!

DDonnager wow fascinating and had no idea, thank you again for the information sir!!

Deo Kumar•12/31/23, 7:15 PM

I deployed it on Cloudflare pages

https://themes.fineshopdesign.com/api/image?url=%2Flogos%2Flogo-512x512.png&w=260&q=75&f=webp

Deo Kumar•12/31/23, 7:29 PM

Is it possible to access ExecutionContext in next js api route? So that I can call methods like ctx.waitUntil([promise]);

James•12/31/23, 8:13 PM

Still waiting on Dario's team to come to an agreement on how it should be exposed to devs

JJames Opt your route into the edge runtime and it will be SSR'd

Befus•12/31/23, 8:20 PM

How would I do this, im not really familiar

BBefus How would I do this, im not really familiar

James•12/31/23, 9:11 PM

https://nextjs.org/docs/app/building-your-application/rendering/edge-and-nodejs-runtimes#segment-runtime-option

JJLK T4 stack is also made by next-on-pages, which is utilized during deployment in t...

James•1/1/24, 3:11 AM

in that case, they should really consider moving the api routes into the nextjs app

DDeo Kumar I deployed it on Cloudflare pages https://themes.fineshopdesign.com/api/image?u...

Donnager•1/1/24, 5:48 AM

dude sickkkk, okay i def need to give this a go!

JJames https://nextjs.org/docs/app/building-your-application/rendering/edge-and-nodejs-...

Befus•1/1/24, 10:27 AM

So I put edge runtime in my layout and in all my api routes, still no luck. It happens when I send a put request to update my date and then refresh to see the new results, its updated in the KV but not in my front end.

Befus•1/1/24, 10:27 AM

James•1/1/24, 10:53 AM

the following two scenarios come to mind

the kv data might not be being fetched and/or updated as you imagine
you have some sort of caching on your domain

Befus•1/1/24, 11:08 AM

import { FunctionComponent } from "react";
import AgendaAdminPage from "./AgendaAdminPage";
import { Package } from "@/types/package";
import { Calendar } from "@/types/calendar";

const Agenda: FunctionComponent = async () => {
  const dates = (await fetch(process.env.NEXT_PUBLIC_HOST + "/api/agenda", {
    headers: {
      "CF-Access-Client-Id": process.env.CF_ACCESS_CLIENT_ID,
      "CF-Access-Client-Secret": process.env.CF_ACCESS_CLIENT_SECRET,
    } as HeadersInit,
  })
    .then((res) => res.json())
    .catch((err) => console.log(err))) as Calendar[];
  console.log(dates);

  const packages = (await fetch(process.env.NEXT_PUBLIC_HOST + "/api/package", {
    headers: {
      "CF-Access-Client-Id": process.env.CF_ACCESS_CLIENT_ID,
      "CF-Access-Client-Secret": process.env.CF_ACCESS_CLIENT_SECRET,
    } as HeadersInit,
  })
    .then((res) => res.json())
    .catch((err) => console.log(err))) as Package[];
  console.log(packages);

  return <AgendaAdminPage dates={dates} packages={packages} />;
};

export default Agenda;

import { FunctionComponent } from "react";
import AgendaAdminPage from "./AgendaAdminPage";
import { Package } from "@/types/package";
import { Calendar } from "@/types/calendar";

const Agenda: FunctionComponent = async () => {
  const dates = (await fetch(process.env.NEXT_PUBLIC_HOST + "/api/agenda", {
    headers: {
      "CF-Access-Client-Id": process.env.CF_ACCESS_CLIENT_ID,
      "CF-Access-Client-Secret": process.env.CF_ACCESS_CLIENT_SECRET,
    } as HeadersInit,
  })
    .then((res) => res.json())
    .catch((err) => console.log(err))) as Calendar[];
  console.log(dates);

  const packages = (await fetch(process.env.NEXT_PUBLIC_HOST + "/api/package", {
    headers: {
      "CF-Access-Client-Id": process.env.CF_ACCESS_CLIENT_ID,
      "CF-Access-Client-Secret": process.env.CF_ACCESS_CLIENT_SECRET,
    } as HeadersInit,
  })
    .then((res) => res.json())
    .catch((err) => console.log(err))) as Package[];
  console.log(packages);

  return <AgendaAdminPage dates={dates} packages={packages} />;
};

export default Agenda;

My fetching is like this, I'm not aware of any caching on my domain

BBefus ```tsx import { FunctionComponent } from "react"; import AgendaAdminPage from "....

James•1/1/24, 11:11 AM

Try putting

cache: 'no-store'

cache: 'no-store'

in your fetch. by default, nextjs tries to cache fetch requests

James•1/1/24, 11:11 AM

possible that may be the cause

JJames Try putting `cache: 'no-store'` in your fetch. by default, nextjs tries to cache...

Befus•1/1/24, 11:14 AM

That was it, thanks a lot!

Befus•1/1/24, 11:14 AM

Not really a fan of all the standard caching nextjs is doing

James•1/1/24, 11:17 AM

no worries, yeah, it catches some people out

subscriptionsOP•1/2/24, 12:17 PM

This might be an old issue, but I deployed my next js site as static export with next on pages, when I refresh any dynamic route it's giving 404, is there any workaround to fix this?

Ssubscriptions This might be an old issue, but I deployed my next js site as static export with...

subscriptionsOP•1/2/24, 4:03 PM

I have fixed this, in case anyone faces a similar issue I wrote an article here https://medium.com/@devakrishna33/eliminating-404-errors-on-dynamic-urls-with-cloudflares-next-on-pages-887c73ca649f

Medium

Eliminating 404 Errors on Dynamic URLs with Cloudflare’s ‘Next on P...

Cloudflare Pages is an efficient and affordable solution for developers to quickly deploy their static websites. It has a solution for…

Ssubscriptions I have fixed this, in case anyone faces a similar issue I wrote an article here ...

James•1/2/24, 4:14 PM

For what it's worth, that's not using next-on-pages if you're just deploying a static export.

@cloudflare/next-on-pages

@cloudflare/next-on-pages

generates a worker that would handle incoming requests to your app, and properly route requests to dynamic routes.

import { FunctionComponent } from "react"; import AgendaAdminPage from "./AgendaAdminPage"; import { Package } from "@/types/package"; import { Calendar } from "@/types/calendar"; const Agenda: FunctionComponent = async () => { const dates = (await fetch(process.env.NEXT_PUBLIC_HOST + "/api/agenda", { headers: { "CF-Access-Client-Id": process.env.CF_ACCESS_CLIENT_ID, "CF-Access-Client-Secret": process.env.CF_ACCESS_CLIENT_SECRET, } as HeadersInit, }) .then((res) => res.json()) .catch((err) => console.log(err))) as Calendar[]; console.log(dates); const packages = (await fetch(process.env.NEXT_PUBLIC_HOST + "/api/package", { headers: { "CF-Access-Client-Id": process.env.CF_ACCESS_CLIENT_ID, "CF-Access-Client-Secret": process.env.CF_ACCESS_CLIENT_SECRET, } as HeadersInit, }) .then((res) => res.json()) .catch((err) => console.log(err))) as Package[]; console.log(packages); return <AgendaAdminPage dates={dates} packages={packages} />; }; export default Agenda;

Your api url might be wrong in workers

Similar Threads

Similar Threads

Similar Threads