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

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

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 to the api function

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

This seems to be breaking the function though.

req, res

req, res

which are the parameters passed into the

handler

handler

function don't work. The

fetch

fetch

API doesn't respect the

method

method

parameter I set and is still just doing a

GET

GET

request.

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

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

it should be

export const runtime = 'edge'

export const runtime = 'edge'

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:

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"

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

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

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

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

What nextjs version do you use?

Ffaye What nextjs version do you use?

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

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

so 14+?

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.

wilburpoweryOP•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?

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

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

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

Thank you!

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

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

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

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

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

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

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

Hmm.. i'll try :/

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

still broken :(

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

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

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

Haha nice

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

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?

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

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

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

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(....) { .... } }

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

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

I put it in public folder

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

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

The reason is

process.env.TURSO_DATABASE_URL

process.env.TURSO_DATABASE_URL

undefiend

undefiend

during the build. It successes when I tried to set

[env.production.vars]

[env.production.vars]

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

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

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

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

is still

undefined

undefined

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

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]

of wrangler.toml

thanks for your help!

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?

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

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

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

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

error on pages using

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

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

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)

(in reality, I receive

code: 8000000

code: 8000000

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

I used

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

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?

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

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

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

the 10mb limit is the gzipped size of that directory

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

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

to be 1200kb when bundled?

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

that does sound excessive

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

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

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

Similar Threads

Similar Threads

Similar Threads