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

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

Z

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

I'll try it on wsl

B

Baran•7/22/24, 3:01 PM

can i call a server-action within a static file (== without declaring

export const runtime = 'edge';

export const runtime = 'edge';

export const runtime = 'edge';

export const runtime = 'edge';)?

J

James•7/22/24, 3:34 PM

no because there's be no function to execute for the action

Z

Zane•7/22/24, 4:04 PM

Hey friends, my Next.js project is having issues with the blog page after deployment. When I click on a specific post, it fails to load. The error message I get is: Application error: a server-side exception has occurred (see the server logs for more information). Digest: 49606443. Here is the relevant code, and it seems the problem is with next-mdx-remote/rsc. Does anyone have any solutions?

JJames no because there's be no function to execute for the action

B

Baran•7/22/24, 4:10 PM

i was thinking that since server-actions are a sort of API that is automatically generated by Next.js, then it would be possible to call a server-action without needing to be on the edge (e.g., with something like

fetch

fetch

or tanstack query)

ZZane Hey friends, my Next.js project is having issues with the blog page after deploy...

J

James•7/22/24, 4:51 PM

what error is being logged?

B

Baran•7/22/24, 6:31 PM

Did anyone manage to integrate Sentry without bloating the bundle size? When I add it, then my bundle size increases from 5mb -> 25mb (and the deployment to Cloudflare pages fail).

J

James•7/22/24, 8:55 PM

that doesnt sound right....

JJames that doesnt sound right....

B

Baran•7/22/24, 10:20 PM

I can’t reproduce the issue in a new repo. So, I started talking with a Sentry employee who works on the nextjs SDK. We will look into it in more detail in the original repo

B

Baran•7/22/24, 10:21 PM

Btw i know i ask quite a bit of questions, but i learned a lot and how next-on-pages and Cloudflare pages work. Thank you for being here and helping me and others

JJames what error is being logged?

Z

Zane•7/23/24, 1:48 AM

Hi, I apologize for not replying earlier; I took a break. Initially, my code used next-mdx-remote/rsc for MDX parsing and rendering, but it caused issues, especially in the Edge environment and with client components. I removed next-mdx-remote/rsc and switched to using next-mdx-remote and next-mdx-remote/serialize for server-side MDX parsing and rendering.

I am a beginner with Next.js, so I wasn't familiar with these issues. I hope this helps others facing similar problems. Thank you all for your support!

BBaran I can’t reproduce the issue in a new repo. So, I started talking with a Sentry e...

I

ItsWendell•7/24/24, 11:22 AM

Did you figure this out? Ran into the exact same problem, my assumption was that the code deduplication wasn't working properly for sentry in combination with next-on-pages causing the sentry to be included seperately for every page, causing the bundle size to get huge. If you're looking into creating a repo that reproduces this try making sure you add multiple pages to your repo.

IItsWendell Did you figure this out? Ran into the exact same problem, my assumption was that...

B

Baran•7/24/24, 1:35 PM

I couldn’t, but perhaps you are on the right path. Would you like to add the comment to this thread in Sentry’s discord? They might escalate it https://discord.com/channels/621778831602221064/1265012843418484828

Z

Zane•7/24/24, 4:28 PM

How to solve this problem? I feel like there's nothing left for my project to compress.

ZZane How to solve this problem? I feel like there's nothing left for my project to co...

A

akazwz•7/24/24, 4:44 PM

should put large files to R2 or something and use cdn

A

akazwz•7/24/24, 4:44 PM

check https://developers.cloudflare.com/pages/platform/limits/#file-size

Cloudflare Docs

Limits · Cloudflare Pages docs

Below are limits observed by the Cloudflare Free plan. For more details on removing these limits, refer to the Cloudflare plans page.

Aakazwz should put large files to R2 or something and use cdn

H

Hard@Work•7/24/24, 4:45 PM

That doesn't work for Functions, as you can't dynamically pull/run JS/WASM

A

akazwz•7/24/24, 4:47 PM

yes. only something like staic media files can do that

Aakazwz should put large files to R2 or something and use cdn

Z

Zane•7/24/24, 4:48 PM

Hi, I’m a beginner in programming and I’m not very familiar with these concepts. Could you please explain in more detail how I can solve this issue? The information available is quite limited and I need some more guidance. Thank you!

Aakazwz yes. only something like staic media files can do that

Z

Zane•7/24/24, 4:50 PM

If I continue to add more content to my project, will it become increasingly difficult to manage? Is there a better approach to handle large projects with Cloudflare Pages Functions?

Z

Zane•7/24/24, 4:51 PM

I feel like I'm over the limit without doing much.

A

akazwz•7/24/24, 4:52 PM

maybe you can check why your function so huge. do u import any large staic files?

Z

Zane•7/24/24, 4:55 PM

I didn't even introduce static images, is that a problem with i18n? I have json files in 10 languages.

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

Similar Threads