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

F

fayeOP•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

fayeOP•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

fayeOP•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

fayeOP•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

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

so 14+?

F

fayeOP•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

fayeOP•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

fayeOP•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

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

Hmm.. i'll try :/

F

fayeOP•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

fayeOP•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

.

Is there anyway to load production env from Dashboard instead of

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

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

B

Baran•7/21/24, 9:58 PM

When I try to deploy my build, I receive

Error: Failed to publish your Function. Got error: Your Functions script is over the 10 MiB size limit (workers.api.error.script_too_large)

Error: Failed to publish your Function. Got error: Your Functions script is over the 10 MiB size limit (workers.api.error.script_too_large)

Error: Failed to publish your Function. Got error: Your Functions script is over the 10 MiB size limit (workers.api.error.script_too_large)

Error: Failed to publish your Function. Got error: Your Functions script is over the 10 MiB size limit (workers.api.error.script_too_large)

(in reality, I receive

code: 8000000

code: 8000000

code: 8000000

code: 8000000, but after talking with the Cloudflare team, the error above is correct).

I used

@next/bundle-analyzer

@next/bundle-analyzer

@next/bundle-analyzer

@next/bundle-analyzer to analyze my build's size:

| Bundle      | Stat    | Parsed | gzippped |
| ----------- | ------- | ------ | -------- |
| client.html | 15.43mb | 1.63mb | 0.49mb   |
| edge.html   | 24.49mb | 3.29mb | 0.89mb   |
| nodejs.html | 14.29mb | 1.20mb | 0.35mb   |
| TOTAL SUM   | 54.21mb | 6.12mb | 1.73mb   |

| Bundle      | Stat    | Parsed | gzippped |
| ----------- | ------- | ------ | -------- |
| client.html | 15.43mb | 1.63mb | 0.49mb   |
| edge.html   | 24.49mb | 3.29mb | 0.89mb   |
| nodejs.html | 14.29mb | 1.20mb | 0.35mb   |
| TOTAL SUM   | 54.21mb | 6.12mb | 1.73mb   |

| Bundle      | Stat    | Parsed | gzippped |
| ----------- | ------- | ------ | -------- |
| client.html | 15.43mb | 1.63mb | 0.49mb   |
| edge.html   | 24.49mb | 3.29mb | 0.89mb   |
| nodejs.html | 14.29mb | 1.20mb | 0.35mb   |
| TOTAL SUM   | 54.21mb | 6.12mb | 1.73mb   |

| Bundle      | Stat    | Parsed | gzippped |
| ----------- | ------- | ------ | -------- |
| client.html | 15.43mb | 1.63mb | 0.49mb   |
| edge.html   | 24.49mb | 3.29mb | 0.89mb   |
| nodejs.html | 14.29mb | 1.20mb | 0.35mb   |
| TOTAL SUM   | 54.21mb | 6.12mb | 1.73mb   |

I am subscribed to the "Workers Paid" plan. I should have 10 MB after compressed with gzip (source: https://developers.cloudflare.com/workers/platform/limits/#worker-size). My gzip total is 1.73mb, so I am confused how I exceeded the max. function size limit.

Q1: How is next-on-pages bundling the app?
Q2: How is the "max. of 10 MB" calculated?

J

James•7/21/24, 10:55 PM

the bundle for your function is located at .vercel/output/static/_worker.js

J

James•7/21/24, 10:56 PM

the 10mb limit is the gzipped size of that directory

J

James•7/21/24, 10:56 PM

going over the limit can often be due to things like barrel file deps or chonky deps that aren't being tree shaken, like icon libraries

JJames going over the limit can often be due to things like barrel file deps or chonky ...

B

Baran•7/21/24, 11:33 PM

Is it normal for an empty file like this:

'use client';

export const runtime = 'edge';

export default function Page() {
  return (
<div>test</div>
  );
}

'use client';

export const runtime = 'edge';

export default function Page() {
  return (
<div>test</div>
  );
}

'use client';

export const runtime = 'edge';

export default function Page() {
  return (
<div>test</div>
  );
}

'use client';

export const runtime = 'edge';

export default function Page() {
  return (
<div>test</div>
  );
}

to be 1200kb when bundled?

J

James•7/22/24, 11:18 AM

that does sound excessive

Z

Zetax•7/22/24, 1:40 PM

Hey there, I just tried getting started with a new NextJS project with Cloudflare pages by just using this create command:

npm create cloudflare@latest my-next-app -- --framework=next

npm create cloudflare@latest my-next-app -- --framework=next

npm create cloudflare@latest my-next-app -- --framework=next

npm create cloudflare@latest my-next-app -- --framework=next

But after installing and running the "npm run dev" command in the project directory, I just get this error and the dev server doesn't start:

 finni on FinnPC at …\zero via  master npm run dev

> zero@0.1.0 dev
> next dev

*** Received structured exception #0xc0000005: access violation; stack: 7ff9a5cf301f 7ff7f240077b 7ff7f2400843 7ff7f23f447c 7ff7f23f4427 7ff7f1c6e1be 7ff7f1c6e4cf 7ff7f0b316f6 7ff7f0b314da 7ff7f1de665f 7ff7f1ded816 7ff7f1de6b7c 7ff7f1ded816 7ff7f1de44ec 7ff7f0b21541 7ff7f349559f 7ff9ca01257c 7ff9ca64af27
C:\Users\finni\Desktop\zero\node_modules\wrangler\wrangler-dist\cli.js:29765
            throw a;
            ^
MiniflareCoreError [ERR_RUNTIME_FAILURE]: The Workers runtime failed to start. There is likely additional logging output above.
    at #assembleAndUpdateConfig (C:\Users\finni\Desktop\zero\node_modules\miniflare\dist\src\index.js:9178:13)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async Mutex.runWith (C:\Users\finni\Desktop\zero\node_modules\miniflare\dist\src\index.js:3521:16)
    at async #waitForReady (C:\Users\finni\Desktop\zero\node_modules\miniflare\dist\src\index.js:9235:5)
    at async Miniflare2._getProxyClient (C:\Users\finni\Desktop\zero\node_modules\miniflare\dist\src\index.js:9359:5)
    at async Miniflare2.getBindings (C:\Users\finni\Desktop\zero\node_modules\miniflare\dist\src\index.js:9378:25)
    at async getPlatformProxy (C:\Users\finni\Desktop\zero\node_modules\wrangler\wrangler-dist\cli.js:210805:20)
    at async setupDevPlatform (C:\Users\finni\Desktop\zero\node_modules\@cloudflare\next-on-pages\dist\next-dev\index.cjs:183:23)
    at async file:///C:/Users/finni/Desktop/zero/next.config.mjs:7:3 {
  code: 'ERR_RUNTIME_FAILURE',
  cause: undefined
}

Node.js v20.9.0

 finni on FinnPC at …\zero via  master npm run dev

> zero@0.1.0 dev
> next dev

*** Received structured exception #0xc0000005: access violation; stack: 7ff9a5cf301f 7ff7f240077b 7ff7f2400843 7ff7f23f447c 7ff7f23f4427 7ff7f1c6e1be 7ff7f1c6e4cf 7ff7f0b316f6 7ff7f0b314da 7ff7f1de665f 7ff7f1ded816 7ff7f1de6b7c 7ff7f1ded816 7ff7f1de44ec 7ff7f0b21541 7ff7f349559f 7ff9ca01257c 7ff9ca64af27
C:\Users\finni\Desktop\zero\node_modules\wrangler\wrangler-dist\cli.js:29765
            throw a;
            ^
MiniflareCoreError [ERR_RUNTIME_FAILURE]: The Workers runtime failed to start. There is likely additional logging output above.
    at #assembleAndUpdateConfig (C:\Users\finni\Desktop\zero\node_modules\miniflare\dist\src\index.js:9178:13)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async Mutex.runWith (C:\Users\finni\Desktop\zero\node_modules\miniflare\dist\src\index.js:3521:16)
    at async #waitForReady (C:\Users\finni\Desktop\zero\node_modules\miniflare\dist\src\index.js:9235:5)
    at async Miniflare2._getProxyClient (C:\Users\finni\Desktop\zero\node_modules\miniflare\dist\src\index.js:9359:5)
    at async Miniflare2.getBindings (C:\Users\finni\Desktop\zero\node_modules\miniflare\dist\src\index.js:9378:25)
    at async getPlatformProxy (C:\Users\finni\Desktop\zero\node_modules\wrangler\wrangler-dist\cli.js:210805:20)
    at async setupDevPlatform (C:\Users\finni\Desktop\zero\node_modules\@cloudflare\next-on-pages\dist\next-dev\index.cjs:183:23)
    at async file:///C:/Users/finni/Desktop/zero/next.config.mjs:7:3 {
  code: 'ERR_RUNTIME_FAILURE',
  cause: undefined
}

Node.js v20.9.0

 finni on FinnPC at …\zero via  master npm run dev

> zero@0.1.0 dev
> next dev

*** Received structured exception #0xc0000005: access violation; stack: 7ff9a5cf301f 7ff7f240077b 7ff7f2400843 7ff7f23f447c 7ff7f23f4427 7ff7f1c6e1be 7ff7f1c6e4cf 7ff7f0b316f6 7ff7f0b314da 7ff7f1de665f 7ff7f1ded816 7ff7f1de6b7c 7ff7f1ded816 7ff7f1de44ec 7ff7f0b21541 7ff7f349559f 7ff9ca01257c 7ff9ca64af27
C:\Users\finni\Desktop\zero\node_modules\wrangler\wrangler-dist\cli.js:29765
            throw a;
            ^
MiniflareCoreError [ERR_RUNTIME_FAILURE]: The Workers runtime failed to start. There is likely additional logging output above.
    at #assembleAndUpdateConfig (C:\Users\finni\Desktop\zero\node_modules\miniflare\dist\src\index.js:9178:13)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async Mutex.runWith (C:\Users\finni\Desktop\zero\node_modules\miniflare\dist\src\index.js:3521:16)
    at async #waitForReady (C:\Users\finni\Desktop\zero\node_modules\miniflare\dist\src\index.js:9235:5)
    at async Miniflare2._getProxyClient (C:\Users\finni\Desktop\zero\node_modules\miniflare\dist\src\index.js:9359:5)
    at async Miniflare2.getBindings (C:\Users\finni\Desktop\zero\node_modules\miniflare\dist\src\index.js:9378:25)
    at async getPlatformProxy (C:\Users\finni\Desktop\zero\node_modules\wrangler\wrangler-dist\cli.js:210805:20)
    at async setupDevPlatform (C:\Users\finni\Desktop\zero\node_modules\@cloudflare\next-on-pages\dist\next-dev\index.cjs:183:23)
    at async file:///C:/Users/finni/Desktop/zero/next.config.mjs:7:3 {
  code: 'ERR_RUNTIME_FAILURE',
  cause: undefined
}

Node.js v20.9.0

 finni on FinnPC at …\zero via  master npm run dev

> zero@0.1.0 dev
> next dev

*** Received structured exception #0xc0000005: access violation; stack: 7ff9a5cf301f 7ff7f240077b 7ff7f2400843 7ff7f23f447c 7ff7f23f4427 7ff7f1c6e1be 7ff7f1c6e4cf 7ff7f0b316f6 7ff7f0b314da 7ff7f1de665f 7ff7f1ded816 7ff7f1de6b7c 7ff7f1ded816 7ff7f1de44ec 7ff7f0b21541 7ff7f349559f 7ff9ca01257c 7ff9ca64af27
C:\Users\finni\Desktop\zero\node_modules\wrangler\wrangler-dist\cli.js:29765
            throw a;
            ^
MiniflareCoreError [ERR_RUNTIME_FAILURE]: The Workers runtime failed to start. There is likely additional logging output above.
    at #assembleAndUpdateConfig (C:\Users\finni\Desktop\zero\node_modules\miniflare\dist\src\index.js:9178:13)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async Mutex.runWith (C:\Users\finni\Desktop\zero\node_modules\miniflare\dist\src\index.js:3521:16)
    at async #waitForReady (C:\Users\finni\Desktop\zero\node_modules\miniflare\dist\src\index.js:9235:5)
    at async Miniflare2._getProxyClient (C:\Users\finni\Desktop\zero\node_modules\miniflare\dist\src\index.js:9359:5)
    at async Miniflare2.getBindings (C:\Users\finni\Desktop\zero\node_modules\miniflare\dist\src\index.js:9378:25)
    at async getPlatformProxy (C:\Users\finni\Desktop\zero\node_modules\wrangler\wrangler-dist\cli.js:210805:20)
    at async setupDevPlatform (C:\Users\finni\Desktop\zero\node_modules\@cloudflare\next-on-pages\dist\next-dev\index.cjs:183:23)
    at async file:///C:/Users/finni/Desktop/zero/next.config.mjs:7:3 {
  code: 'ERR_RUNTIME_FAILURE',
  cause: undefined
}

Node.js v20.9.0

E

Erisa•7/22/24, 1:45 PM

Given you're on Windows, it could be related to this
https://github.com/cloudflare/next-on-pages/blob/main/packages/next-on-pages/docs/supported.md

@cloudflare/next-on-pages
@cloudflare/next-on-pages
can be run on Linux, Mac OS and Windows but its usage under the latter is discouraged as we've noticed that one of the CLI's dependencies, the Vercel CLI (used to build the Next.js application) seems not to work reliably on Windows. If you need to run
@cloudflare/next-on-pages
@cloudflare/next-on-pages
on Windows we advise you to run it under the Windows Subsystem for Linux.

E

Erisa•7/22/24, 1:45 PM

Though that says miniflare, so

maybe not, but still worth a mention

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

Similar Threads

Similar Threads

Similar Threads