Is there a Cloudflare equivalent to Cloudinary's remote image fetch? And is there any good documenta

Is there a Cloudflare equivalent to Cloudinary's remote image fetch? And is there any good documentation on using it with Next's Image component?

Kkiko Is there a Cloudflare equivalent to Cloudinary's remote image fetch? And is ther...

Scai•8/18/24, 12:25 AM

https://developers.cloudflare.com/images/transform-images/integrate-with-frameworks/

Cloudflare Docs

Integrate with frameworks | Cloudflare Image Optimization docs

Image transformations can be used automatically with the Next.js <Image /> component.

Scai•8/18/24, 12:27 AM

Hey, I think this happened before for some people and I'm not the first one. I have a page with a custom header component which fetches a external service and I seted to revalidate cache in 3 mins, but the page is building as static page. The header component is used on every page and if I put the runtime edge in root layout all the pages aren't anymore static rendereded.

Scai•8/18/24, 12:28 AM

Example of function created:

src/lib/uptime.ts
export const areMonitorsDown = async () => {
  const response = await fetch(
    "your_awesome_monitoring_service_url",
    {
      method: "GET",
      headers: {
        "Content-Type": "application/json",
        Authorization: `Bearer ${process.env.API_KEY}`,
      },
      next: {
        // Cache the response for 3 minutes
        revalidate: 3 * 60,
      },
    }
  );

  if (response.status !== 200) {
    console.error("Failed to fetch monitors", response);
    return null;
  }

  const body = await response.json();
  const monitors = body.data;
  return monitors.some((monitor: any) => monitor.attributes.status === "down");
};

src/lib/uptime.ts
export const areMonitorsDown = async () => {
  const response = await fetch(
    "your_awesome_monitoring_service_url",
    {
      method: "GET",
      headers: {
        "Content-Type": "application/json",
        Authorization: `Bearer ${process.env.API_KEY}`,
      },
      next: {
        // Cache the response for 3 minutes
        revalidate: 3 * 60,
      },
    }
  );

  if (response.status !== 200) {
    console.error("Failed to fetch monitors", response);
    return null;
  }

  const body = await response.json();
  const monitors = body.data;
  return monitors.some((monitor: any) => monitor.attributes.status === "down");
};

Scai•8/18/24, 12:52 AM

How I could achieve that only that part of header is updated and rest remain static?

Wwindygod9986 Hey, I am trying to access D1 database binding in my server action using process...

Scai•8/18/24, 4:10 PM

Did you setup the cloudflare package on Next config?

Scai•8/18/24, 4:17 PM

The page where you use server actions, what render method it use?

Scai•8/18/24, 4:18 PM

That's on development env?

Scai•8/18/24, 4:18 PM

I would check all steps from here: https://developers.cloudflare.com/pages/framework-guides/nextjs/ssr/get-started/

Scai•8/18/24, 4:19 PM

Yeah, and that client component is used on a page after all

Scai•8/18/24, 4:20 PM

In my case I was using a server action in header and it wasn't executed because it was static rendered and not on edge runtime.

Scai•8/18/24, 4:20 PM

Funny thing to change all pages to edge runtime.

Dalist•8/18/24, 5:43 PM

guys I'm using Next.js and want to use cloudflare pages with Puppeteer, which I'm assuming would run on workers instead of lambda functions, do you know a newer tutorial for Next.js, this one seems old:
https://blog.cloudflare.com/running-serverless-puppeteer-workers-durable-objects

FFiru I was looking at the same thing after my escapades in trying to get Sentry or Lo...

fletcher3•8/19/24, 11:41 AM

Hi, I was trying to add observability to our pages project, but I was also encountering an unreasonable bloat up of the bundle size. Using vercel/otel package as alternative also does not work due to another open issue. I opened a new issue regarding this, as I would really like to understand what is going on
https://github.com/cloudflare/next-on-pages/issues/860

GitHub

[🐛 Bug]: Sentry bloats up bundle size when building with npx @cloud...

next-on-pages environment related information System: Platform: darwin CPU: arm64 Apple M3 Pro Memory: 18 GB Shell: /bin/zsh Package Manager Used: npm (10.5.0) Relevant Packages: @cloudflare/next-o...

Ffletcher3 Hi, I was trying to add observability to our pages project, but I was also encou...

Firu•8/19/24, 11:42 AM

If you're ok with using another platform for o11y, I recommend Axiom

Firu•8/19/24, 11:42 AM

they don't bloat the bundles

FFiru If you're ok with using another platform for o11y, I recommend Axiom

fletcher3•8/20/24, 11:30 AM

Thanks, looks great, will definitely give it a go

Ffletcher3 Thanks, looks great, will definitely give it a go

Firu•8/20/24, 12:03 PM

sure thing! lemme know if you find any pitfalls or pain points i might've missed

ItsWendell•8/20/24, 12:38 PM

Axiom actually also supports a lot of the OpenTelemetry standard, I also haven't got vercel/otel to work yet, if someone did, that would be awesome so I can send those into axiom too.

IItsWendell Hard to see what is happening here when we don't see how the pages are generated...

sean.h•8/20/24, 1:07 PM

Sure, been on other things the last few days.

job-logs.txt284.59KB

neoney•8/22/24, 5:09 PM

getRequestContext doesn't seem to have hyperdrive?

neoney•8/22/24, 5:09 PM

it smissing

neoney•8/22/24, 5:10 PM

and when it starts

neoney•8/22/24, 5:10 PM

Found a non-empty WRANGLER_HYPERDRIVE_LOCAL_CONNECTION_STRING variable for binding. Hyperdrive will connect to this database during local development.

hunter.jia•8/23/24, 4:03 AM

i deploy monorepo to pages and successful,but the access path is not available
Do you guys know the reason why

hunter.jia•8/23/24, 4:04 AM

the monorepo is about next

Max•8/23/24, 9:03 PM

I‘m using Next Requests and next-on-pages.
Which IP is used when calling an external (free+publicly available) API?
I assume it’s Cloudflare‘s IP, isn’t it?
I‘m asking because I‘m afraid of hitting the rate limit of that external API.

D Trombett•8/23/24, 9:48 PM

well, yeah, the request is sent from Cloudflare servers

D Trombett•8/23/24, 9:49 PM

it shouldn't be always the same tho, as it depends on the region and the server

Sheng•8/23/24, 10:40 PM

Is there any way that we can use single .env file for environment variables instead of duplicated variables in .env, .dev.vars, and the wrangler.toml file?

James•8/24/24, 11:54 AM

unfortunately wrangler refuses to respect the industry standard of using .env

Bonadio•8/24/24, 5:34 PM

Hi, trying to create a Nextjs project with "npm install --save-dev @Cloudflare/next-on-pages" results in 5 vulnerabilities (1 low, 2 moderate, 2 high), running npm audit fix does not solve the problem. Any ideas?

whizzy•8/25/24, 12:44 PM

my d1 is not working on local machine, gives me error of table not found, using with pages, and d1 binding
I also gave it this value in wrangler.toml but doesnt seem to be working

preview_database_id = "DATABASE"

preview_database_id = "DATABASE"

whizzy•8/25/24, 12:45 PM

can anyone help me setup locally, just give me couple of steps

D Trombett•8/25/24, 2:31 PM

might be obvious but... did you create the table locally?

D Trombett•8/25/24, 2:32 PM

afaik local database doesn't inherit anything from the real one

whizzy•8/26/24, 2:50 PM

why to create local one? what I want to test the remote d1 on local ?

Wwhizzy why to create local one? what I want to test the remote d1 on local ?

Hard@Work•8/26/24, 2:58 PM

You can't. next-on-pages only interacts with local DBs

whizzy•8/26/24, 3:00 PM

daaamn, was this supposed to be a feature ? why ?

sean.h•8/27/24, 1:53 PM

I think I've figured out what's helping our next on pages worker bundle go over 25MiB.
We have 1256 static pages and 24 edge function routes.
The static routes are all output to a prerender-manifest.json (this is normal NextJS behaviour).

The next-on-pages deploy process copies the contents of this file into each edge function js file as a __PRERENDER_MANIFEST variable.
Our prerender-manifest.json comes in at 781KiB, so for me we've got it duplicated 24 times and in theory only need 1 copy of this in the final worker that's generated.

Has anyone else come across this before I raise it as a bug/improvement on GitHub?

AA•8/27/24, 2:25 PM

any differences between 1.9.0 and 1.13.2 that would give me an "ReferenceError: XMLHttpRequest is not defined"

kstulgys•8/27/24, 2:25 PM

"Your Worker exceeded the size limit of 1 MiB"

How? I tried already quite a few thing in my my nextjs 14 app. This is the app:

export default function Home() {
  return null;
  // return <Client />;
}
// import Client from "./client";
// import dynamic from "next/dynamic";

// const Client = dynamic(() => import("./client").then((mod) => mod.Client), {
//   loading: () => <p>Loading...</p>,
// });

export default function Home() {
  return null;
  // return <Client />;
}
// import Client from "./client";
// import dynamic from "next/dynamic";

// const Client = dynamic(() => import("./client").then((mod) => mod.Client), {
//   loading: () => <p>Loading...</p>,
// });

AAA any differences between 1.9.0 and 1.13.2 that would give me an "ReferenceError: ...

AA•8/27/24, 2:38 PM

Going to try 1.12.1.. i wonder what version killed this

AA•8/27/24, 2:44 PM

yea 1.9.0 is the last version of next-on-pages i can use.. Tips for troubleshooting would be appreciated

AA•8/27/24, 2:51 PM

https://github.com/cloudflare/next-on-pages/releases/tag/%40cloudflare%2Fnext-on-pages%401.10.0 no obvious changes

GitHub

Release @cloudflare/next-on-pages@1.10.0 · cloudflare/next-on-pages

Minor Changes

739e2a7: make (no-op) caches available in dev mode
update setupDevPlatform to also add a caches object to the global scope
so that it can be used during development in a production-...

AAA any differences between 1.9.0 and 1.13.2 that would give me an "ReferenceError: ...

yuripave•8/27/24, 3:36 PM

Apparently the issue starts from 1.31.2 with the route scoping change, 1.31.1 should work without issue

Yyuripave Apparently the issue starts from 1.31.2 with the route scoping change, 1.31.1 s...

AA•8/27/24, 3:47 PM

I tried on 1.10.0 and had the same issue

AA•8/27/24, 8:04 PM

its not apparently obvious what the change was. i wonder if its a dep change..

src/lib/uptime.ts export const areMonitorsDown = async () => { const response = await fetch( "your_awesome_monitoring_service_url", { method: "GET", headers: { "Content-Type": "application/json", Authorization: `Bearer ${process.env.API_KEY}`, }, next: { // Cache the response for 3 minutes revalidate: 3 * 60, }, } ); if (response.status !== 200) { console.error("Failed to fetch monitors", response); return null; } const body = await response.json(); const monitors = body.data; return monitors.some((monitor: any) => monitor.attributes.status === "down"); };

export default function Home() { return null; // return <Client />; } // import Client from "./client"; // import dynamic from "next/dynamic"; // const Client = dynamic(() => import("./client").then((mod) => mod.Client), { // loading: () => <p>Loading...</p>, // });

Is there a Cloudflare equivalent to Cloudinary's remote image fetch? And is there any good documenta

Similar Threads

Similar Threads

Similar Threads