Hey Dario, I'm trying to make kv work on local environment. In next.config.mjs I setupDevBindings li

Hey Dario, I'm trying to make kv work on local environment. In next.config.mjs I setupDevBindings like https://github.com/cloudflare/next-on-pages/issues/271 but getRequestContext().env.MY_KV; return empty. Do you have an Idea what I'm doing wrong?

GitHub

[⚡ Feature]: Mocking `process.env.` when running `next dev` · Issue...

Wrangler mocks D1 locally with from this file .wrangler/state/..../db.sqlite So I was thinking it would be possible polymorphically get the binding to query that file when developing using next dev...

PPat Branchaud Hey Dario, I'm trying to make kv work on local environment. In next.config.mjs I...

osa•4/23/24, 3:40 PM

I think you should define the bindings in

wrangler.toml

wrangler.toml

: https://github.com/cloudflare/next-on-pages/blob/main/internal-packages/next-dev/README.md

Oosa I think you should define the bindings in `wrangler.toml` : https://github.com/c...

Pat BranchaudOP•4/23/24, 4:49 PM

Thank you, I tried that as well, and doesn't work. Did you manage to make it work?

SSM I'm NOT looking to bypass cache on every request. I want my Nextjs app to fetch ...

matiasjMusante•4/23/24, 6:19 PM

IF cache busting solves it, you could as well make a custom implementation and call it when/where you need it. I mean, revalidating would give the same effects than creating a "new" fetch (by adding timestamp somewhere, route or headers). Hope someone may explain all this a little bit more or give some clarification/solution (I myself can´t make the cache: no store option to work, and found that only revalidatePath/Tag are the only ways to revalidate a fetch made inside an nextjs project on nexat-on-pages).

NNob I have about 30-40ms

karim•4/23/24, 10:47 PM

The only thing I can think of is that in my page.tsx file I import in a 1mb json file. Could that be whats slowing it down?

karim•4/23/24, 10:47 PM

If not, does anyone else know how to trouble high cpu time? (median is about 150ms for me)

Kkarim The only thing I can think of is that in my page.tsx file I import in a 1mb json...

Nob•4/23/24, 11:53 PM

yes maybe

PPat Branchaud Thank you, I tried that as well, and doesn't work. Did you manage to make it wor...

osa•4/24/24, 5:22 AM

Yes, if you want a working example run npm create cloudflare@latestnpm create cloudflare@latest select "Website or web app" and "Next". Uncomment the KV section in

wrangler.toml

wrangler.toml

and app/api/hello/route.tsapp/api/hello/route.ts. start dev server

npm run dev

npm run dev

and visit http://localhost:3000/api/hello . If that works for you, then check that you have all the needed packages and correct versions (

wrangler

wrangler

@cloudflare/next-on-pages

@cloudflare/next-on-pages

) etc.

ANBU•4/24/24, 6:40 AM

https://github.com/iflamed/hono-react-ssr-shadcn-ui

Sharing this cool project that I found on Hono discord server
All credits to the author

GitHub

GitHub - iflamed/hono-react-ssr-shadcn-ui: Template code for Honojs...

Template code for Honojs with React SSR and Shadcn-UI which running on Cloudflare Pages. - iflamed/hono-react-ssr-shadcn-ui

andrea_bhweb•4/24/24, 9:23 AM

Was investigating to find out why my site was slow in some pages, then today I finally found out why. For some reason making CF cache resulting pages at the edge (by using a Cache Rule) doesn't play well with page streaming: the page is returned only when Next is done rendering the whole page, so TTFB becomes a second and a half instead of milliseconds. Is this a known issue? Is there a config I can operate to have both CF cache and page streaming when not primed?

Oosa Are you using the Workers KV for caching? https://github.com/cloudflare/next-on-...

SM•4/24/24, 12:26 PM

You are a bloody legend. This fixed every weird cache issue we were facing

Can't thank you enough. I owe you a beer/coffee. Seriously. I think this is important information for Nextjs devs coming from Vercel where distributed, fast caching is the norm, so I've suggested an edit to the framework guide (https://github.com/cloudflare/cloudflare-docs/issues/14231).

GitHub

Issues · cloudflare/cloudflare-docs

Cloudflare’s documentation. Contribute to cloudflare/cloudflare-docs development by creating an account on GitHub.

florent•4/24/24, 4:34 PM

It looks like I cant use React Server Components with Cloudflare Pages and Nextjs right? At least not If I try to use D1. I need to call getRequestContext()getRequestContext() on the edge and I can only set export const runtime = "edge";export const runtime = "edge"; within an api route, right? (Nextjs 14)

Fflorent It looks like I cant use React Server Components with Cloudflare Pages and Nextj...

thipperz•4/24/24, 5:54 PM

that's not true, you can export that const in a layout file and that will affect all pages within it

thipperz•4/24/24, 5:55 PM

actually I do export that const in various places like my D1 functions folder

Tthipperz actually I do export that const in various places like my D1 functions folder

florent•4/24/24, 5:56 PM

do you use use serveruse server within the files in your D1 folder?

and thanks for the hint with the layout, I didn't try that one

Fflorent do you use `use server` within the files in your D1 folder? and thanks for the...

thipperz•4/24/24, 6:11 PM

I only use "use server" for server actions, and I use server actions when I need to fetch or update data from client components. Since I cannot use D1 bindings directly from client components, I use server actions to forward requests to the file that interacts with D1.

Server actions are all exported functions that you have in a file that begins with the "use server" directive, and adding this directive at the top of the file means that you cannot export any other thing except for async functions, not even the "export const runtime = 'edge'" - so they have this limitation, which I believe is intented.

Tthipperz I only use "use server" for server actions, and I use server actions when I need...

florent•4/24/24, 10:31 PM

tysm! I think I didnt understand how all these pieces work together, now I've managed to call my d1 db without any problems. I really really appreciate it your explanation cleared it for me

thipperz•4/24/24, 10:33 PM

I'm glad to be helpful!

Georgi Vatsov•4/25/24, 7:04 AM

Hey! Anyone aware if I could use Cache API (caches.default) in next-on-pages project's middleware file?

mr nooli•4/26/24, 3:03 PM

Hey, a slightly random question, when you get a massive nextjs project w/ cloudflare you end up going over the 10mb limit (especially if there's prisma involved), is it possible to split the worker.js file into multiple fragments to get below this limit? @James

Chaika•4/26/24, 3:04 PM

no, pages bundles it all into a single worker file, and the limit is on that

mr nooli•4/26/24, 3:05 PM

hmmmm kk

mr nooli•4/26/24, 3:06 PM

I mean that's not a limitation for me rn, the limitation is prisma x supabase isn't compatible on the edge yet

but hopefully when/if that happens I'll be back on CF

Varna•4/26/24, 3:15 PM

I made an action updateItem(id, value)updateItem(id, value) that is called in client component via onClick.
In dev (localhost) it works. When deployed to CF, it fails request and returns 404 response with not found html page.
If on first line of action I console.log("updateItem starts")console.log("updateItem starts"), it doesn't even appear on CF logs. And what is strange, on CF logs there are multiple calls to the url (2-6 extra requests on average).

Varna•4/26/24, 3:16 PM

I heard that if action throws in nextjs, then it returns 404 page. But not even a single console.log() being pushed is a bit strange to me.

mr nooli•4/26/24, 3:24 PM

idk if it's anyhow relevant to you but I've had an issue before w/ cf where I was importing an action directly from a client component - which in theory is safe but it started working again once I passed it in from a server component, so might be worth checking if that helps?

mr nooli•4/26/24, 3:24 PM

I actually usually prefer passing it via server components

might just be a me thing tho

Taylor•4/26/24, 8:20 PM

I'm going to move that to pages-help sorry

HHmph I'm thinking of moving my next 14 app from vercel to workers. Does anyone have a...

luna•4/27/24, 5:36 AM

https://developers.cloudflare.com/workers/observability/logging/ i send mine to axiom via a tail worker

Cloudflare Docs

Logging · Cloudflare Workers docs

Use different methods of logging throughout the entire software development lifecycle of your Worker project.

Varna•4/27/24, 9:46 AM

Is it me or Next is "handling" errors instead of actually throwing anything useful to logs?

Varna•4/27/24, 9:48 AM

i.e. I have server action that throws, but logs are OK as request returns 404 html and no other errors available in tail

Nob•4/27/24, 7:04 PM

Hey, Is there a way to access KV, D1 etc from local with nextjs ?

Nob•4/27/24, 7:04 PM

the bindings are always null when i do next dev

DiamondDragon•4/27/24, 11:43 PM

Could not find a declaration file for module '@cloudflare/next-on-pages/next-dev'. Could not find a declaration file for module '@cloudflare/next-on-pages/next-dev'. on import { setupDevPlatform } from '@cloudflare/next-on-pages/next-dev'import { setupDevPlatform } from '@cloudflare/next-on-pages/next-dev' in next.config.mjs. Any suggestions?

loco•4/28/24, 6:29 AM

is there a billing or speed difference in calling a worker via service binding vs calling via fetch+custom.domain for worker? Provided i am using next-on-pages

Walshy•4/28/24, 9:35 AM

service bindings will be faster

Walshy•4/28/24, 9:35 AM

both will charge an invocation (but service bindings won't in the future)

loco•4/28/24, 10:24 AM

According to the docs, i have to use wrangler pages dev if i am using a service binding for the worker(defined in .toml)
So if i use next dev, is it correct to assume the worker would be unavailable?

Helfo•4/28/24, 1:52 PM

Hi, I have next.js with zero trust + workers as API

How i can access current signed user's email in next.js and worker?

My current hint is to decode frontend cookie in worker and hopefuly will get that email and send it back to frontend in response? Some endpoint like GET /userGET /user thats is requested on initila page load

HHelfo Hi, I have next.js with zero trust + workers as API How i can access current si...

avogadro•4/29/24, 12:56 PM

import {jwtDecode} from 'jwt-decode'
jwtDecode(headers().get('cf-access-jwt-assertion'))['email']

import {jwtDecode} from 'jwt-decode'
jwtDecode(headers().get('cf-access-jwt-assertion'))['email']

Lluna yeah i switched back to the vercel one.

Deo Kumar•4/29/24, 2:05 PM

Hey! What's median cpu time after using it?
And are you able to use it since it always hits the cpu time limits.

DDeo Kumar Hey! What's median cpu time after using it? And are you able to use it since it ...

loco•4/29/24, 2:30 PM

@cf-wasm/og didnt work for me either on local dev
I ended up using the vercel one as well.

Lloco @cf-wasm/og didnt work for me either on local dev I ended up using the vercel on...

Deo Kumar•4/29/24, 2:31 PM

How are you importing it?

loco•4/29/24, 2:32 PM

import * as og from "@cf-wasm/og/next";

loco•4/29/24, 2:32 PM

was giving me webpack errors

Lloco was giving me webpack errors

Deo Kumar•4/29/24, 2:32 PM

Can you show the error?

DDeo Kumar Can you show the error?

loco•4/29/24, 2:35 PM

I have part of the error still in clipboard since i no longer have it installed.
not sure how much it would help but here it is

BREAKING CHANGE: Since webpack 5 WebAssembly is not enabled by default and flagged as experimental feature.

BREAKING CHANGE: Since webpack 5 WebAssembly is not enabled by default and flagged as experimental feature.

loco•4/29/24, 2:36 PM

it seems other people had the same issue but with vercel/og as well so might not be your library
https://github.com/vercel/next.js/issues/44003

GitHub

@vercel/og: WebAssembly module for webpack Error · Issue #44003 · v...

Verify canary release I verified that the issue exists in the latest Next.js canary release Provide environment information Operating System: Platform: win32 Arch: x64 Version: Windows 10 Pro Binar...

mau•4/29/24, 6:22 PM

When i am building my dynamic routes with SSG it is forcing me to use edge even though i have set

export const dynamicParams = false

export const dynamicParams = false

as mentioned in the documentation.

here is https://github.com/cloudflare/next-on-pages/issues/751 to github issue which is posted by someone else

GitHub

[🐛 Bug]: Pages that could be static is being forced to run in the e...

next-on-pages environment related information myproject@0.1.0 deploy npm run pages:build && wrangler pages deploy myproject@0.1.0 pages:build npx @cloudflare/next-on-pages

@cloudflare/ne...

Hey Dario, I'm trying to make kv work on local environment. In next.config.mjs I setupDevBindings li

Similar Threads

Similar Threads

Similar Threads