Does anyone have a working example of D1 + next-on-pages for both local dev and production?

M

Matthew•7/11/24, 8:59 PM

what do you guys use for payment processing on C3 setup? stripe is giving a lot of failures in production worker env

CCat Socks Does anyone have a working example of D1 + next-on-pages for both local dev and ...

J

James•7/12/24, 8:23 AM

You can use the next-dev sub-module for local development, and then you should be able to use the same binding from prod and dev via process.env.BINDING_NAME.
https://github.com/cloudflare/next-on-pages/tree/main/internal-packages/next-dev

S

Sheng•7/12/24, 2:06 PM

Hi guys, has anyone managed to deploy with react-email/tailwind? having error:

workers.api.error.script_too_large

workers.api.error.script_too_large

workers.api.error.script_too_large

workers.api.error.script_too_large

J

James•7/12/24, 2:42 PM

If you're on the free plan, you might be hitting the 1mb limit. This can often happen due to chonky dependencies, or you just have a lot of SSR'd routes. You couly upgrade to Workers Paid for a higher limit

C

certified dirtiboi•7/12/24, 7:59 PM

Hello Cloudflare community,
I'm encountering an intermittent error in my Next.js application deployed on Cloudflare Workers (next-on-pages). The error occurs in various environments and states:

Error: Disallowed operation called within global scope. Asynchronous I/O (ex: fetch() or connect()), setting a timeout, and generating random values are not allowed within global scope. To fix this error, perform this operation within a handler. https://developers.cloudflare.com/workers/runtime-apis/handlers/
Full stack trace varies depending on when the error occurred, but it typically involves files in the .vercel/output/static/_worker.js directory.

Error: Disallowed operation called within global scope. Asynchronous I/O (ex: fetch() or connect()), setting a timeout, and generating random values are not allowed within global scope. To fix this error, perform this operation within a handler. https://developers.cloudflare.com/workers/runtime-apis/handlers/
Full stack trace varies depending on when the error occurred, but it typically involves files in the .vercel/output/static/_worker.js directory.

Error: Disallowed operation called within global scope. Asynchronous I/O (ex: fetch() or connect()), setting a timeout, and generating random values are not allowed within global scope. To fix this error, perform this operation within a handler. https://developers.cloudflare.com/workers/runtime-apis/handlers/
Full stack trace varies depending on when the error occurred, but it typically involves files in the .vercel/output/static/_worker.js directory.

Error: Disallowed operation called within global scope. Asynchronous I/O (ex: fetch() or connect()), setting a timeout, and generating random values are not allowed within global scope. To fix this error, perform this operation within a handler. https://developers.cloudflare.com/workers/runtime-apis/handlers/
Full stack trace varies depending on when the error occurred, but it typically involves files in the .vercel/output/static/_worker.js directory.

The nature of the error:

Occurs sporadically
Doesn't consistently happen on the same user action
Sometimes occurs when the user signs out
Other times happens when navigating to a different route via side nav

What I've tried:

Reviewed code to ensure async operations are within handlers
Checked middleware and API routes for top-level async operations
Verified next.config.mjs setup for Cloudflare Workers
Ensured fetch calls in components are within useEffect hooks or event handlers

System info:

OS: Linux 6.5 Debian GNU/Linux 12 (bookworm)
Node: 22.4.0
npm: 10.8.1
pnpm: 9.5.0

Key npm packages:

@clerk/nextjs: ^5.1.5
@Cloudflare/next-on-pages: ^1.11.3
@Cloudflare/workers-types: ^4.20240605.0
next: ^14.2.4
react: ^18
react-dom: ^18
typescript: ^5
wrangler: ^3.60.2

Questions:

Are there known issues with Next.js on Cloudflare Workers causing this intermittent error?
Given the sporadic nature, what debugging strategies would you recommend?
Are there specific areas in a Next.js + Cloudflare Workers setup prone to causing this type of error?

Any insights or suggestions would be greatly appreciated. Thank you for your help!

W

wilburpowery•7/12/24, 8:53 PM

Howdy folks. I have a Next.js project on Cloudflare have have a

src/pages/api/signup.js

src/pages/api/signup.js

src/pages/api/signup.js

src/pages/api/signup.js api route that uses fetch to do a POST request to another app. When deploying it, the build failed and I needed to add the

export const config = { runtime: 'experimental-edge' };

export const config = { runtime: 'experimental-edge' };

export const config = { runtime: 'experimental-edge' };

export const config = { runtime: 'experimental-edge' }; export to the api function

W

wilburpowery•7/12/24, 8:54 PM

This seems to be breaking the function though.

req, res

req, res

req, res

req, res which are the parameters passed into the

handler

handler

handler

handler function don't work. The

fetch

fetch

API doesn't respect the

method

method

method

method parameter I set and is still just doing a

GET

GET

GET

GET request.

W

wilburpowery•7/12/24, 8:54 PM

Any tips on debugging/fixing this?

Wwilburpowery Howdy folks. I have a Next.js project on Cloudflare have have a `src/pages/api/s...

F

faye•7/13/24, 4:15 PM

it should be

export const runtime = 'edge'

export const runtime = 'edge'

export const runtime = 'edge'

export const runtime = 'edge'

F

faye•7/13/24, 4:16 PM

Also hey guys!

I got an issue using turborepo.
When building locally, it works fine, however when building on CF Pages, I get this:

F

faye•7/13/24, 4:16 PM

Where in my apps/db_web package.json, I have this script:

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

F

faye•7/13/24, 4:16 PM

Ffaye it should be `export const runtime = 'edge'`

W

wilburpowery•7/13/24, 6:06 PM

I tried “edge” but the build failed and said only “experimental-edge” or “nodejs” were valid runtimes

Wwilburpowery I tried “edge” but the build failed and said only “experimental-edge” or “nodejs...

F

faye•7/13/24, 6:07 PM

What nextjs version do you use?

Ffaye What nextjs version do you use?

W

wilburpowery•7/13/24, 6:08 PM

This project was on 13.0.x but I then updated it to be on the exact version mention in the README in the next-on-pages repo.

F

faye•7/13/24, 6:08 PM

so 14+?

F

faye•7/13/24, 6:09 PM

I don't know what version the repo says. But I am using the latest 14.2.5, and that works fine.

W

wilburpowery•7/13/24, 6:13 PM

Interesting. And do you happen to have api functions that use the fetch api to do a POST request?

W

wilburpowery•7/13/24, 6:13 PM

I’ll try to upgrade the project to see if it works

W

wilburpowery•7/13/24, 6:13 PM

Thank you!

Ccertified dirtiboi Hello Cloudflare community, I'm encountering an intermittent error in my Next.js...

J

James•7/13/24, 6:26 PM

Wouldnt be able to tell without some sort of reproduction to play around with

Wwilburpowery This seems to be breaking the function though. `req, res` which are the paramete...

J

James•7/13/24, 6:28 PM

That is not the format for edge api routes. You should consider using Next.js app directory route handlers instead as they function across both nodejs and edge runtime without needing changes, whereas the pages router has two different formats for edge vs nodejs
https://nextjs.org/docs/app/building-your-application/routing/route-handlers

Wwilburpowery Interesting. And do you happen to have api functions that use the fetch api to d...

F

faye•7/13/24, 8:04 PM

https://github.com/Headpat-Community/headpat.de/blob/main/src/app/api/user/signin/route.ts#L5

Ffaye Also hey guys! I got an issue using turborepo. When building locally, it works ...

F

faye•7/13/24, 11:33 PM

Hey @James, unsure if you over-read my message. Would you be able to help?

Ffaye Hey <@94508156243161088>, unsure if you over-read my message. Would you be able ...

J

James•7/14/24, 9:29 AM

Looks like something might not be configured correctly. Might be related to the wrong nodejs version. Might be that the package name is wrong. Not sure - I don't use turborepo

F

faye•7/14/24, 9:29 AM

Hmm.. i'll try :/

F

faye•7/14/24, 9:44 AM

still broken :(

J

James•7/14/24, 11:07 AM

I can only assume that turborepo isn't able to find a project with that name in your repo

F

faye•7/14/24, 11:10 AM

Ah I found the issue! It seems that I forgot about changing the name in the package.json to @apps/db_web as well, so the filter actually works

J

James•7/14/24, 11:11 AM

Haha nice

A

arch•7/14/24, 3:35 PM

https://davidgomes.com/the-experience-of-deploying-next-js-apps-on-cloudflare/

David Gomes

The Experience of Deploying Next.js Apps on Cloudflare

I recently went through the process of deploying various small Next.js applications to Cloudflare. As part of working on a new command called "neonctl create-app", we built a way to automatically deploy Next.js full-stack apps (i.e., Next.js apps with a backend+frontend) to both Cloudflare and

E

esselungo•7/14/24, 5:44 PM

where can i put the _redirects file in a nextjs app? https://developers.cloudflare.com/pages/configuration/redirects/

Cloudflare Docs

Redirects · Cloudflare Pages docs

To use redirects on Cloudflare Pages, declare your redirects in a plain text file called _redirects without a file extension, in the output folder of …

Wwilburpowery Thank you!

!

!EXPER•7/15/24, 6:15 AM

did you solve the problem?

X

xianyun88•7/15/24, 3:03 PM

I am unable to access the d1 database properly when running the CloudFlare Pages project locally using npm run preview,
I have added it to the wrangler.toml file
[[env.preview.d1_databases]]
binding = "DB" # available in your Worker on env.DB
database_name = "mydb_local"
database_id = "7926ce2e-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
But when using drizzle to access the database, it prompts that the table does not exist

Eesselungo where can i put the _redirects file in a nextjs app? https://developers.cloudfla...

J

James•7/16/24, 7:26 AM

you can move stuff to your output directory after building if you wish

K

kika•7/17/24, 1:18 AM

Hi, the worker local development doesn't support running a queue producer and consumer in separate workers and it's advised in the doc to put them temporarily in one file. I'm sending a message from the Server Action, but where can I put the consumer

export default { async queue(....) { .... } }

export default { async queue(....) { .... } }

export default { async queue(....) { .... } }

export default { async queue(....) { .... } } ?

Eesselungo where can i put the _redirects file in a nextjs app? https://developers.cloudfla...

D

Deo Kumar•7/18/24, 12:54 PM

I put it in public folder

L

LEU•7/19/24, 7:40 AM

I having this git action deployment fail.

// prisma.ts
import { PrismaClient } from "@prisma/client";
import { PrismaLibSQL } from "@prisma/adapter-libsql";
import { createClient } from "@libsql/client";

let prisma: PrismaClient;
const libsql = createClient({
    url: process.env.TURSO_DATABASE_URL,
    authToken: process.env.TURSO_AUTH_TOKEN,
});
export const prisma = new PrismaClient({ adapter });

// prisma.ts
import { PrismaClient } from "@prisma/client";
import { PrismaLibSQL } from "@prisma/adapter-libsql";
import { createClient } from "@libsql/client";

let prisma: PrismaClient;
const libsql = createClient({
    url: process.env.TURSO_DATABASE_URL,
    authToken: process.env.TURSO_AUTH_TOKEN,
});
export const prisma = new PrismaClient({ adapter });

// prisma.ts
import { PrismaClient } from "@prisma/client";
import { PrismaLibSQL } from "@prisma/adapter-libsql";
import { createClient } from "@libsql/client";

let prisma: PrismaClient;
const libsql = createClient({
    url: process.env.TURSO_DATABASE_URL,
    authToken: process.env.TURSO_AUTH_TOKEN,
});
export const prisma = new PrismaClient({ adapter });

// prisma.ts
import { PrismaClient } from "@prisma/client";
import { PrismaLibSQL } from "@prisma/adapter-libsql";
import { createClient } from "@libsql/client";

let prisma: PrismaClient;
const libsql = createClient({
    url: process.env.TURSO_DATABASE_URL,
    authToken: process.env.TURSO_AUTH_TOKEN,
});
export const prisma = new PrismaClient({ adapter });

build error

LibsqlError: URL_INVALID: The URL 'undefined' is not in a valid format

LibsqlError: URL_INVALID: The URL 'undefined' is not in a valid format

LibsqlError: URL_INVALID: The URL 'undefined' is not in a valid format

LibsqlError: URL_INVALID: The URL 'undefined' is not in a valid format

The reason is

process.env.TURSO_DATABASE_URL

process.env.TURSO_DATABASE_URL

process.env.TURSO_DATABASE_URL

process.env.TURSO_DATABASE_URL is

undefiend

undefiend

undefiend

undefiend during the build. It successes when I tried to set

[env.production.vars]

[env.production.vars]

[env.production.vars]

[env.production.vars] in

wrangler.toml

wrangler.toml

wrangler.toml

wrangler.toml.

Is there anyway to load production env from Dashboard instead of

wrangler.toml

wrangler.toml

wrangler.toml

wrangler.toml?

Mmartior <@1133234803995594762> set it as a secret in the dashboard, you will still need ...

L

LEU•7/19/24, 7:56 AM

I'm doing that for local build, but the issue is on automatic deployment with github

L

LEU•7/19/24, 7:57 AM

I already define all production env, but the

process.env.TURSO_DATABASE_URL

process.env.TURSO_DATABASE_URL

process.env.TURSO_DATABASE_URL

process.env.TURSO_DATABASE_URL is still

undefined

undefined

undefined

undefined

Mmartior <@1133234803995594762> set it as a secret in the dashboard, you will still need ...

L

LEU•7/19/24, 8:04 AM

ah, got it. the reason was that I didn't set it as secret. however, this is so strange that non-secrete not override

[env.production.vars]

[env.production.vars]

[env.production.vars]

[env.production.vars] of wrangler.toml

thanks for your help!

D

daz•7/19/24, 10:57 AM

In the process of creating Next.js Full-Stack Deployment on Cloudflare Pages (next-on-pages)
The application will use a template with values substituted via Cloudflare KV
I am struggling to understand how this would be priced based on the documentation.
I'm on cloudflare pro plan and I have cloudflare workers pro
To my understanding the only cost of doing cloudflare pages versus workers is if you use cloudflare 'functions' which relies on having files in a folder called 'functions' which we don't have.
Am I correct in thinking the only additional cost to my sub (cloudflare pro and workers pro) is likely to be the cost of KV reads which i'd have anyway if i used workers instead?
Or is there a charge for running Next.JS in Full-Stack Deployment mode in the first place?

J

James•7/20/24, 1:14 PM

If you are using next-on-pages, we generate our own worker which is deployed with your application. This worker is invoked for all incoming requests except things like /_next/static by default

J

James•7/20/24, 1:14 PM

So there's still a worker which is used, we just hide the complexity from you

O

Oreki•7/21/24, 6:10 AM

Hii, i am facing an issue where all of a sudden i am getting

invalid prerender config

invalid prerender config

invalid prerender config

invalid prerender config error on pages using

export const dynamicParams = off

export const dynamicParams = off

export const dynamicParams = off

export const dynamicParams = off

this was working perfectly fine until yesterday, without making any changes to the pages, this is failing now

T

thipperz•7/21/24, 4:47 PM

It seems like enabling Cloudflare Anti-AI scraping tool also blocks some legit Google bots.. Lots of search console tests just fails and it shows up in the dashboard as blocked..

Does anyone have a working example of D1 + next-on-pages for both local dev and production?

Similar Threads

Similar Threads

Similar Threads