Hm.. thanks for the "tip", I just figured out that if you use a domain instead of IP, it does work.

F

fayeOP•8/7/24, 3:37 PM

Although the internal server error has nothing to do with this issue AFAIK, as it's just a "not found" route

Ffaye Hm.. thanks for the "tip", I just figured out that if you use a domain instead o...

C

Chaika•8/7/24, 5:31 PM

Workers can't fetch IPs and have restrictions on fetching specific ports

C

Chaika•8/7/24, 5:33 PM

(flowchart by community mvp albert)

e9ae7e44c051cc5157a3e7ae2d30b274e6a57049_2_1035x543.png

M

Max•8/8/24, 9:43 AM

When using Nextjs, would you advise using Cloudflare Functions or nextjs-on-pages and Nextjs API route?
So what are the pros and cons besides Functions is Cloudflare exklusive?

J

James•8/8/24, 4:19 PM

nextjs API routes if you want to use SSR. if you want your site to just be SSG, you don't need next-on-pages

M

Md.Sadiq•8/8/24, 6:22 PM

My nextjs app is taking a long time to compile even sir small change is there any way to speed it up or it's my laptop problem

MMd.Sadiq My nextjs app is taking a long time to compile even sir small change is there an...

I

ItsWendell•8/9/24, 8:50 AM

Dev mode or to compile for production?

M

Md.Sadiq•8/9/24, 8:51 AM

Dev mode

I

ItsWendell•8/9/24, 8:51 AM

Try

next dev --turbo

next dev --turbo

next dev --turbo

next dev --turbo

I

iska•8/10/24, 9:57 AM

hi i manage to deployed a nextjs ssr on cloudflare page with the plugin @Cloudflare/next-on-pages , issue is when i deploy , first i did it manual and took from .vercel/output/static , if i try to take the whole folder containing function deploy is failing

where do i deploy my functions folder then ? thank

J

James•8/10/24, 12:17 PM

are you referring to the cloudflare functions directory? you should be using nextjs API routes instead if you use next-on-pages

N

num•8/10/24, 7:49 PM

is it possible to know the worker bundle file before uploading it to cloudflare? I've seen https://developers.cloudflare.com/workers/platform/limits/#worker-size but i'm not sure which files in the
next-on-pages
next-on-pages
build output are equivalent nvm found it.
But if i check the files in the

__worker.js

__worker.js

__worker.js

__worker.js manually and gzip them they don't seem to be bigger than 1MB so theoretically they won't exceed the limit.
Any ideas what i could be missing?

D

diffthanevery01•8/13/24, 11:31 AM

Hi, I have a question, I am using cloudflare pages to host my nextjs (ssr) application, it has localhost everything is ok, no errors, but after deploying a new version of the application on one of the pages it shows an error "Internal Server Error". It's not an application error, it's kind of like cloudflare, nothing interesting is recorded in the logs. Any ideas?

W

Walshy•8/13/24, 11:47 AM

how do you know it isn't an application error?

W

Walshy•8/13/24, 11:47 AM

it sounds like one

P

pcolas•8/13/24, 2:42 PM

Hello, I have a Cloudflare Pages app using NextJS (Pages router) in SSR. I'm trying to implement a custom 404 page. I have created a 404.tsx file using getStaticProps but when I go to a non-existent page on Cloudflare, the page displayed is the nextjs _error component and not my custom 404. However it was properly generated as a static html file.
Apparently using SSR with Cloudflare Pages removes the default behavior to automatically return 404.html pages deployed. Indeed when running in node runtime in local the correct 404 page is displayed but when running in edge runtime with local workers (wrangler pages dev), I have the issue.
How could I implement this logic ?

M

Matthew•8/14/24, 3:57 AM

anyone have an example of email workers on next-on-pages?

Ddiffthanevery01 Hi, I have a question, I am using cloudflare pages to host my nextjs (ssr) appli...

J

James•8/14/24, 12:28 PM

Do you get any errors logged when using log stream or tailing the deployment?

S

sean.h•8/14/24, 2:39 PM

Hey everyone, have others had issues hitting the 25 MiB individual file limit when using a mix of SSR and static pages?
Feel like there might be something missing in our config and everything is contributing to the bundle.
We've got DatoCMS as our data store and only a couple of thousand pages.

Ssean.h Hey everyone, have others had issues hitting the 25 MiB individual file limit wh...

I

ItsWendell•8/15/24, 7:26 AM

Hard to see what is happening here when we don't see how the pages are generated in e.g. the next.js build output, willing to share a snippet of that?

V

veeque•8/15/24, 7:37 AM

i have an app where the user has access to a dashboard, makes some customisations that get pushed to a db, then if a user's customer goes to

myapp.com/the-users-name

myapp.com/the-users-name

myapp.com/the-users-name

myapp.com/the-users-name they will see a page that gets rendered based on the customisations applied. to do this in vercel i would use isr with

revalidatePath()

revalidatePath()

revalidatePath()

revalidatePath(), since cf doesn't support it, do i just have to put

export const runtime = 'edge'

export const runtime = 'edge'

export const runtime = 'edge'

export const runtime = 'edge' on the dynamic route and just have every request count towards the workers usage quota, correct?

J

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

yes

V

veeque•8/15/24, 9:00 AM

ight, thanks

F

Firu•8/16/24, 2:57 AM

Does anyone have recommendations for lightweight error logging SaaS products for next-on-pages? Adding Sentry doesn't seem to pass the Pages build

I

ItsWendell•8/16/24, 7:38 AM

@Firu I'm personally pushing logs and errors into Axiom, for front-end and back-end (https://axiom.co), it's not as feature-rich as Sentry but it does the job.

IItsWendell <@112215213553541120> I'm personally pushing logs and errors into Axiom, for fro...

F

Firu•8/16/24, 8:45 AM

I was looking at the same thing after my escapades in trying to get Sentry or Logpush to work. How's the integration experience? Could you please point me towards the docs you used?

F

Firu•8/16/24, 8:46 AM

also does it bloat for bundle size on deployment? Sentry adds 1.6Mb to all my frontend routes - which led to me going way past the upload size limit for a worker

FFiru also does it bloat for bundle size on deployment? Sentry adds 1.6Mb to all my fr...

H

Hard@Work•8/16/24, 8:50 AM

It's pretty easy. You can just lob a JSON object at

https://api.axiom.co/v1/datasets/$DATASET_NAME/ingest

https://api.axiom.co/v1/datasets/$DATASET_NAME/ingest

with a Bearer token

H

Hard@Work•8/16/24, 8:50 AM

nvm, just reread the convo

H

Hard@Work•8/16/24, 8:51 AM

Yeah, just throw a JSON object like

{
  "error": "SomeString"
  "context1": "SomethingElse"
  // ...
}

{
  "error": "SomeString"
  "context1": "SomethingElse"
  // ...
}

{
  "error": "SomeString"
  "context1": "SomethingElse"
  // ...
}

{
  "error": "SomeString"
  "context1": "SomethingElse"
  // ...
}

HHard@Work It's pretty easy. You can just lob a JSON object at `https://api.axiom.co/v1/dat...

F

Firu•8/16/24, 9:42 AM

oh sweet, an HTTP endpoint

F

Firu•8/16/24, 9:42 AM

i'll have a look. thanks @Hard@Work & @ItsWendell !

HHard@Work It's pretty easy. You can just lob a JSON object at `https://api.axiom.co/v1/dat...

F

Firu•8/16/24, 10:09 AM

do you have any experience with their next-axiom library?

FFiru do you have any experience with their [next-axiom](https://github.com/axiomhq/ne...

H

Hard@Work•8/16/24, 11:49 AM

No, I do not(in fact, I don't use Next much anymore)

HHard@Work No, I do not(in fact, I don't use Next much anymore)

F

Firu•8/16/24, 12:41 PM

anymore

what happened?

F

Firu•8/16/24, 12:41 PM

also update on Axiom, works very well so far without bloating the bundle. i love the non-opinionated nature of it

FFiru > anymore what happened?

H

Hard@Work•8/16/24, 12:59 PM

No real issues with Next, I just haven't used it in a while. Last I used it for my blog, which is now on Astro

HHard@Work No real issues with Next, I just haven't used it in a while. Last I used it for ...

F

Firu•8/16/24, 1:02 PM

How's the Astro experience on Cloudflare Pages? anything particular pain points or is it smooth so far? it looks pretty promising

FFiru How's the Astro experience on Cloudflare Pages? anything particular pain points ...

I

Isaac McFadyen•8/16/24, 1:12 PM

Quite smooth from my experience + what I've seen around here. Depends on what you're doing of course, but overall it seems pretty good.

FFiru also update on Axiom, works very well so far without bloating the bundle. i love...

I

ItsWendell•8/16/24, 1:42 PM

Likewise, a small little tip, I've two different loggers, one for server components / ssr / middleware and one (using a hook) for client components.

The reason I do this is that I can add more context to the logs this way based on which context we are, here's rough examples:

Probably smarter ways to do this but this has worked pretty well!

message.txt3.26KB

IItsWendell Likewise, a small little tip, I've two different loggers, one for server compone...

F

Firu•8/16/24, 1:45 PM

this makes sense, definitely think it's a good idea to split the logs based on context

F

Firu•8/16/24, 1:45 PM

thanks for the advice!

D

D Trombett•8/16/24, 4:16 PM

First time using Pages with Next.js, I was wondering if I can retrieve data from D1 directly from a Server Component, so that I can display that data on the page without needing to make an API call to another worker

K

kiko•8/16/24, 5:48 PM

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

S

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.

S

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.

S

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");
};

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");
};

S

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

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

Hm.. thanks for the "tip", I just figured out that if you use a domain instead of IP, it does work.

Similar Threads