Did you check out this page? https://developers.cloudflare.com/pages/framework-guides/nextjs/ssr/tro

JJames Did you check out this page? https://developers.cloudflare.com/pages/framework-g...

P

Puliczek•9/11/24, 11:58 AM

Thanks, added: export const dynamicParams = false . But same problem.

K

koribot•9/11/24, 2:51 PM

import puppeteer from "@cloudflare/puppeteer";

can we use cloudeflare puppeteer inside nextj api route?

K

koribot•9/11/24, 2:53 PM

or I'll just create a separate worker for it

P

Puliczek•9/11/24, 4:58 PM

Go with separate worker 100%, you will have simple API to use it.

S

Sam•9/12/24, 1:17 AM

Has anyone managed to get wildcard custom domains working with pages? I've tried using a proxy worker but I'm getting a 522 error. It works fine without the wildcard custom domain.

Original message was deleted

S

Sam•9/12/24, 1:25 AM

e.g. *.example.com - mainly for SaaS stuff. https://developers.cloudflare.com/dns/manage-dns-records/reference/wildcard-dns-records/

S

Sam•9/12/24, 1:28 AM

Yeah, I need it to be wildcard for a SaaS product.

S

Sam•9/12/24, 1:29 AM

Yeah, they support it just not on pages for some reason. The workaround I've seen is to use a proxy worker (since you can use wildcard DNS there) but I get an error that makes little sense.

S

Sam•9/12/24, 1:30 AM

Yeah, I've seen that of course

hence asking about the workaround or if anyone has got it working another way.

S

Sam•9/12/24, 1:30 AM

a 522 error as above

S

Sam•9/12/24, 1:34 AM

Yeah, they're all pretty old which is why I figured I'd ask here

S

switz•9/12/24, 3:19 AM

anyone know the answer to this? pages-helpHow can I access my d1 database in next on pages edge LOCALLY?

PPuliczek Thanks, added: export const dynamicParams = false . But same problem.

J

JamesOP•9/12/24, 9:06 AM

are you able to share some sort of repro by any chance?

N

num•9/12/24, 1:36 PM

does anyone know what could be the reason why a next/link in local dev mode doesn't cause a full page transition but deployed via next-on-pages it does?

N

num•9/12/24, 1:49 PM

weird it seems to transition fine when running with next dev but is doing the full page load if i try to run it with wrangler dev and the next-on-pages build output

J

JamesOP•9/12/24, 6:25 PM

Are you able to share a reproduction?

N

num•9/12/24, 8:46 PM

Is it possible that it's because the urls where it seems to full page load are " ● (SSG) prerendered as static HTML (uses getStaticProps)"?
I've noticed it seems to work fine on next on pages for the routes that are "ƒ (Dynamic) server-rendered on demand"

N

num•9/12/24, 8:46 PM

i can send you the source via DM as it's not yet open source

Nnum Is it possible that it's because the urls where it seems to full page load are "...

D

D Trombett•9/12/24, 9:42 PM

It shouldn't matter afaik

B

Baran•9/13/24, 10:30 AM

When using the

@vercel/otel

@vercel/otel

@vercel/otel

@vercel/otel library in a Next.js app that compiles with next-on-pages, then the CLI throws an error. So, we can’t use observability tools with OpenTelemetry (e.g., Sentry, Highlight.io). Furthermore, Cloudflare bought Baselime (observability tool) which supports OpenTelemetry standards, but we can’t use that either.

So, it’s hard to observe Next.js apps compiled with next-on-pages, and

@vercel/otel

@vercel/otel

@vercel/otel

@vercel/otel not being supported is ongoing for 7 months.

Is there any plan to support

@vercel/otel

@vercel/otel

@vercel/otel

@vercel/otel soon?

Related issues:

S

shra1dhar•9/15/24, 7:04 PM

Nextjs Middleware for App Dir
The middleware docs are not helpful for App Dir project. Not able to trigger the middleware. I even tried /functions/middleware.ts to no avail. How to go about it?

This is the closest thing I can find. Can someone confirm if this is the right way?

J

JamesOP•9/15/24, 7:09 PM

You can use default Next.js middleware

S

shra1dhar•9/15/24, 7:47 PM

The default Nextjs Middleware does not work from what I can tell. Maybe it works in the Pages Dir, but in App dir I'm not able to make it work. Nor am I able to find another example online or its reference in the docs.

I fixed it. The middleware.ts is supposed to be defined in the root dir and not inside of app dir. (which I was doing accidently)
Thanks anyway.

K

koribot•9/16/24, 12:21 PM

Hello does zustand works well with next-on-pages?

Kkoribot Hello does zustand works well with next-on-pages?

P

Pichou•9/16/24, 7:24 PM

Yep, I use it for my project, and I have no issue with it.

A

Anubis•9/17/24, 5:13 AM

I was using WARP DNS VPN(1.1.1.1) for ONLINE servers. I can't get in with it anymore. I asked Server FOUNDER. Cloudflare said it blocked it.
I wonder why it was blocked?

B

bun•9/17/24, 1:32 PM

hi fellow next people, how do you do logging/error tracing on next-on-pages ? what is the recommended way? im tired of constantly having to tail the deployment in order to see any significant logs

M

Mahir Altınkaya•9/17/24, 9:38 PM

Hello, I think you might be able to help with this issue, and I appreciate your assistance in advance.

I am developing an application with Next.js, which I deployed successfully to Cloudflare Pages and connected to my domain. Afterward, I set up a proxy using a Cloudflare Worker. I am using the next-intl library. The language changes do not reflect on the components in the pages, but everything works correctly when running locally in dev mode with Wrangler or after building the app. SEO content is rendered correctly in the appropriate language in these cases. All caches are disabled. Since everything works locally, I cannot pinpoint the source of the issue.

When I run the Worker locally, I can see that all requests and parameters are correctly sent from the client to the Worker. I suspect that Cloudflare Pages is not correctly handling my Next.js application and is continuously serving the default language preferences. I can also see the language change in the cookies. Can you help me with this?

M

Mahir Altınkaya•9/17/24, 9:43 PM

@James

MMahir Altınkaya Hello, I think you might be able to help with this issue, and I appreciate your ...

B

bun•9/17/24, 10:37 PM

can you clear the caches just in case?

Bbun can you clear the caches just in case?

M

Mahir Altınkaya•9/17/24, 10:41 PM

Yes, the cache has been cleared. In fact, it has been completely disabled.

M

Mahir Altınkaya•9/17/24, 10:42 PM

At the endpoint, also disable the proxy and use DNS only.

MMahir Altınkaya Hello, I think you might be able to help with this issue, and I appreciate your ...

J

JamesOP•9/18/24, 6:36 AM

When you run wrangler pages dev does it work properly?

JJames When you run wrangler pages dev does it work properly?

M

Mahir Altınkaya•9/18/24, 7:44 AM

Since wrangler dev was working correctly, but errors occurred on Pages, I focused entirely on investigating Pages for a while. I discovered that the error was caused by an environment variable I had set on Pages, which had actually been changed but was still active on the backend, leading to incorrect results. Now, everything is working smoothly without any errors, and it's working really well. Thank you (=.

J

JamesOP•9/18/24, 8:17 AM

Ah nice, glad to hear

L

lucasp•9/18/24, 12:13 PM

Hi people, how are you? I'm trying to use Firebase Auth with Next Auth, that is, the Firebase login is executed in a Next Route, all deployed, but when I deploy and try to use it, it doesn't work. I see the logs with the following error:

FirebaseError: Firebase: Error (auth/network-request-failed).

FirebaseError: Firebase: Error (auth/network-request-failed).

FirebaseError: Firebase: Error (auth/network-request-failed).

FirebaseError: Firebase: Error (auth/network-request-failed).

E

Epailes•9/18/24, 6:48 PM

Is anyone else getting this error?

⚡️ ERROR: Failed to produce a Cloudflare Pages build from the project.
⚡️ 
⚡️      The following routes were not configured to run with the Edge Runtime:
⚡️        - /_error
⚡️ 
⚡️      Please make sure that all your non-static routes export the following edge runtime route segment config:
⚡️        export const runtime = 'edge';
⚡️ 
⚡️      You can read more about the Edge Runtime on the Next.js documentation:
⚡️        https://nextjs.org/docs/app/building-your-application/rendering/edge-and-nodejs-runtimes

⚡️ ERROR: Failed to produce a Cloudflare Pages build from the project.
⚡️ 
⚡️      The following routes were not configured to run with the Edge Runtime:
⚡️        - /_error
⚡️ 
⚡️      Please make sure that all your non-static routes export the following edge runtime route segment config:
⚡️        export const runtime = 'edge';
⚡️ 
⚡️      You can read more about the Edge Runtime on the Next.js documentation:
⚡️        https://nextjs.org/docs/app/building-your-application/rendering/edge-and-nodejs-runtimes

⚡️ ERROR: Failed to produce a Cloudflare Pages build from the project.
⚡️ 
⚡️      The following routes were not configured to run with the Edge Runtime:
⚡️        - /_error
⚡️ 
⚡️      Please make sure that all your non-static routes export the following edge runtime route segment config:
⚡️        export const runtime = 'edge';
⚡️ 
⚡️      You can read more about the Edge Runtime on the Next.js documentation:
⚡️        https://nextjs.org/docs/app/building-your-application/rendering/edge-and-nodejs-runtimes

⚡️ ERROR: Failed to produce a Cloudflare Pages build from the project.
⚡️ 
⚡️      The following routes were not configured to run with the Edge Runtime:
⚡️        - /_error
⚡️ 
⚡️      Please make sure that all your non-static routes export the following edge runtime route segment config:
⚡️        export const runtime = 'edge';
⚡️ 
⚡️      You can read more about the Edge Runtime on the Next.js documentation:
⚡️        https://nextjs.org/docs/app/building-your-application/rendering/edge-and-nodejs-runtimes

This is the contents of my

error.tsx

error.tsx

error.tsx

error.tsx at the root of my

app

app

app

app directory:

'use client';

export const runtime = 'edge';

export default function Error() {
    return (
        <div>
            <h1>Oops! Something went wrong.</h1>
            <p>Try refreshing the page?</p>
        </div>
    );
}

'use client';

export const runtime = 'edge';

export default function Error() {
    return (
        <div>
            <h1>Oops! Something went wrong.</h1>
            <p>Try refreshing the page?</p>
        </div>
    );
}

'use client';

export const runtime = 'edge';

export default function Error() {
    return (
        <div>
            <h1>Oops! Something went wrong.</h1>
            <p>Try refreshing the page?</p>
        </div>
    );
}

'use client';

export const runtime = 'edge';

export default function Error() {
    return (
        <div>
            <h1>Oops! Something went wrong.</h1>
            <p>Try refreshing the page?</p>
        </div>
    );
}

I also have a

not-found.tsx

not-found.tsx

not-found.tsx

not-found.tsx with this:

export const runtime = 'edge';

export default async function NotFound() {
    // ...
    return (
        <div>
            <h1>Not Found</h1>
        </div>
    );
}

export const runtime = 'edge';

export default async function NotFound() {
    // ...
    return (
        <div>
            <h1>Not Found</h1>
        </div>
    );
}

export const runtime = 'edge';

export default async function NotFound() {
    // ...
    return (
        <div>
            <h1>Not Found</h1>
        </div>
    );
}

export const runtime = 'edge';

export default async function NotFound() {
    // ...
    return (
        <div>
            <h1>Not Found</h1>
        </div>
    );
}

Versions:

"next": "14.2.12",
"@cloudflare/next-on-pages": "^1.13.2",

"next": "14.2.12",
"@cloudflare/next-on-pages": "^1.13.2",

"next": "14.2.12",
"@cloudflare/next-on-pages": "^1.13.2",

"next": "14.2.12",
"@cloudflare/next-on-pages": "^1.13.2",

Build command is:

"pages:build": "npx @cloudflare/next-on-pages",

"pages:build": "npx @cloudflare/next-on-pages",

"pages:build": "npx @cloudflare/next-on-pages",

"pages:build": "npx @cloudflare/next-on-pages",

I've tried building after deleting both

error.tsx

error.tsx

error.tsx

error.tsx and

not-found.tsx

not-found.tsx

not-found.tsx

not-found.tsx and the error persists.
I've also deleted the

.next

.next

.next

.next,

.vercel

.vercel

.vercel

.vercel, and

node_modules

node_modules

directory then rebuilding everything, issue persists

I've also tried downgrading nextjs to version

14.0.0

14.0.0

14.0.0

14.0.0 as I saw that's what was used in the next-on-pages e2e tests, and the issue persists.

I've went through every

.page.tsx

.page.tsx

.page.tsx

.page.tsx,

layout.tsx

layout.tsx

, and

route.tsx

route.tsx

route.tsx

route.tsx, and specified the edge runtime, I'm completely stumped.
Happens on both my windows machine, and on pages when building on cloudflare

T

thipperz•9/18/24, 9:41 PM

Try removing that 'use client', also remove 'async' from the NotFound() function, and finally make sure you are not computing stuff inside not-found.tsx

Tthipperz Try removing that 'use client', also remove 'async' from the NotFound() function...

E

Epailes•9/18/24, 10:35 PM

Removing

use client

use client

use client

use client from

error.tsx

error.tsx

error.tsx

error.tsx gives this:

  ./app/error.tsx must be a Client Component. Add the "use client" directive the top of the file to resolve this issue.

  ./app/error.tsx must be a Client Component. Add the "use client" directive the top of the file to resolve this issue.

  ./app/error.tsx must be a Client Component. Add the "use client" directive the top of the file to resolve this issue.

  ./app/error.tsx must be a Client Component. Add the "use client" directive the top of the file to resolve this issue.

Tried taking out the

async

async

from

not-found.tsx

not-found.tsx

not-found.tsx

not-found.tsx (which doesn't have any logic, just returns a div saying "not found", and it still gives the same error:

⚡️ ERROR: Failed to produce a Cloudflare Pages build from the project.
⚡️ 
⚡️      The following routes were not configured to run with the Edge Runtime:
⚡️        - /_error
⚡️ 
⚡️      Please make sure that all your non-static routes export the following edge runtime route segment config:
⚡️        export const runtime = 'edge';
⚡️ 
⚡️      You can read more about the Edge Runtime on the Next.js documentation:
⚡️        https://nextjs.org/docs/app/building-your-application/rendering/edge-and-nodejs-runtimes

⚡️ ERROR: Failed to produce a Cloudflare Pages build from the project.
⚡️ 
⚡️      The following routes were not configured to run with the Edge Runtime:
⚡️        - /_error
⚡️ 
⚡️      Please make sure that all your non-static routes export the following edge runtime route segment config:
⚡️        export const runtime = 'edge';
⚡️ 
⚡️      You can read more about the Edge Runtime on the Next.js documentation:
⚡️        https://nextjs.org/docs/app/building-your-application/rendering/edge-and-nodejs-runtimes

⚡️ ERROR: Failed to produce a Cloudflare Pages build from the project.
⚡️ 
⚡️      The following routes were not configured to run with the Edge Runtime:
⚡️        - /_error
⚡️ 
⚡️      Please make sure that all your non-static routes export the following edge runtime route segment config:
⚡️        export const runtime = 'edge';
⚡️ 
⚡️      You can read more about the Edge Runtime on the Next.js documentation:
⚡️        https://nextjs.org/docs/app/building-your-application/rendering/edge-and-nodejs-runtimes

⚡️ ERROR: Failed to produce a Cloudflare Pages build from the project.
⚡️ 
⚡️      The following routes were not configured to run with the Edge Runtime:
⚡️        - /_error
⚡️ 
⚡️      Please make sure that all your non-static routes export the following edge runtime route segment config:
⚡️        export const runtime = 'edge';
⚡️ 
⚡️      You can read more about the Edge Runtime on the Next.js documentation:
⚡️        https://nextjs.org/docs/app/building-your-application/rendering/edge-and-nodejs-runtimes

E

Epailes•9/18/24, 10:43 PM

If anyone searches this, managed to get it working.
My root

layout.tsx

layout.tsx

file had the following:

export const runtime = 'edge';
export const dynamic = 'force-dynamic';
export const revalidate = 0;

export const runtime = 'edge';
export const dynamic = 'force-dynamic';
export const revalidate = 0;

export const runtime = 'edge';
export const dynamic = 'force-dynamic';
export const revalidate = 0;

export const runtime = 'edge';
export const dynamic = 'force-dynamic';
export const revalidate = 0;

Which for my use case was fine, nearly every page retrieves data from a CMS, not much gets statically rendered.

Deleting the root layout fixed it and it built successfully, I wonder if it's because I'm using the

platforms

platforms

platforms

platforms approach, so don't have a root

page.tsx

page.tsx

file, only a layout.
Will look into it more tomorrow but at least I've found how to make it compile!

L

LiveWithCodeAnkit•9/19/24, 10:07 AM

Hey everyone, I have the same issue. In my root file, layout.tsx, I added the following lines of code:

export const runtime = 'edge';
export const dynamic = 'force-dynamic';
export const revalidate = 0;

D

D Trombett•9/19/24, 10:27 AM

I think the problem is that the edge runtime doesn't have http and https modules so you should use the built-in fetch

L

LiveWithCodeAnkit•9/19/24, 10:40 AM

@D Trombett But in the Vercel deployment, it runs perfectly without these lines:

export const runtime = 'edge';
export const dynamic = 'force-dynamic';
export const revalidate = 0;

L

LiveWithCodeAnkit•9/19/24, 10:40 AM

if any solution for this please give me

LLiveWithCodeAnkit <@597505862449496065> But in the Vercel deployment, it runs perfectly without t...

D

D Trombett•9/19/24, 10:47 AM

Because Cloudflare next-on-pages requires edge runtime at the moment

D

D Trombett•9/19/24, 10:48 AM

While vercel doesn't

A

Ashish Rawat•9/19/24, 2:46 PM

cloudflare pages is basically useless for next.js app with runtime = 'edge'. Hope they introduce improvement related to this in birthday week

AAshish Rawat cloudflare pages is basically useless for next.js app with runtime = 'edge'. Hop...

�

🍋 Pandeo 🍋•9/19/24, 2:47 PM

What does the runtime edge limit in functionalities ?

A

Ashish Rawat•9/19/24, 2:59 PM

so many, can't use firebase-admin sdk, mongodb sdk etc...

�

🍋 Pandeo 🍋•9/19/24, 3:00 PM

Oh that interesting ahah, because i want to make a next app using supabase so i imagine that i will have some problem to host it on pages ^^'

Did you check out this page? https://developers.cloudflare.com/pages/framework-guides/nextjs/ssr/tro

Similar Threads