It looks like I cant use React Server Components with Cloudflare Pages and Nextjs right? At least no

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

T

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

T

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

F

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

do you use

use server

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

T

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

F

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

T

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

I'm glad to be helpful!

G

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?

M

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

C

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

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

M

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

hmmmm kk

M

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

V

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

V

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.

M

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?

M

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

I actually usually prefer passing it via server components

might just be a me thing tho

T

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

L

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.

V

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

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

V

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

N

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

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

N

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

the bindings are always null when i do next dev

D

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?

L

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

W

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

service bindings will be faster

W

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

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

L

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?

H

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

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

A

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.

D

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

L

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

D

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

How are you importing it?

L

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

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

L

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

was giving me webpack errors

Lloco was giving me webpack errors

D

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

Can you show the error?

DDeo Kumar Can you show the error?

L

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.

L

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

M

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

M

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

Any help?

C

Codename_404•4/30/24, 4:20 AM

my next js project building fine locally, but on cloudlfare, it keeps on building for hours, but does not finish

C

Codename_404•4/30/24, 4:21 AM

Any idea how to fix that?

DDiamondDragon `Could not find a declaration file for module '@cloudflare/next-on-pages/next-de...

D

DiamondDragon•4/30/24, 5:42 AM

For more context, I have a nextjs app package in a pnpm monorepo and the next-on-pages is being installed in the root node moules, so the types are not coming through. I had to create a

apps/nextjs/next-on-pages.d.ts

apps/nextjs/next-on-pages.d.ts

apps/nextjs/next-on-pages.d.ts

apps/nextjs/next-on-pages.d.ts file with

declare module '@cloudflare/next-on-pages/next-dev' {
    export function setupDevPlatform(): Promise<void>
}

declare module '@cloudflare/next-on-pages/next-dev' {
    export function setupDevPlatform(): Promise<void>
}

declare module '@cloudflare/next-on-pages/next-dev' {
    export function setupDevPlatform(): Promise<void>
}

declare module '@cloudflare/next-on-pages/next-dev' {
    export function setupDevPlatform(): Promise<void>
}

to get around the build errors. not sure if this is the best solution

CCodename_404 my next js project building fine locally, but on cloudlfare, it keeps on buildin...

M

Mick•4/30/24, 5:56 AM

I have just see the same issue when it deploys from a Github repo, if I just push it up from my mac

pnpm run deploy

pnpm run deploy

pnpm run deploy

pnpm run deploy

it works within a few seconds, I cancelled the last production build after 15 mins of it not working - is there something wrong at Cloudflares end today?

M

matiasjMusante•4/30/24, 1:16 PM

Does anybody know something about function usage when rendering static pages on next-on-pages?

https://community.cloudflare.com/t/loading-static-page-counts-towards-function-request/535651

Is this correct?

Thanks!

M

matiasjMusante•4/30/24, 1:46 PM

I checked it On my dashboard and SG pages dont seem to add function usage.. I´ll try again just to be sure...

N

Nicolai•4/30/24, 5:41 PM

I've set up clerk (core v2) with next-on-pages for tRPC authorization.
I'm using the clerk middleware:

import { clerkMiddleware, createRouteMatcher } from "@clerk/nextjs/server";
import { NextResponse } from "next/server";

const isProtectedRoute = createRouteMatcher(["/start(.*)"]);

export default clerkMiddleware(
  (auth, request) => {
    if (isProtectedRoute(request)) {
      auth().protect();
    }

    return NextResponse.next();
  },
  { debug: true },
);

export const config = {
  matcher: ["/((?!.+\\.[\\w]+$|_next)._)", "/", "/(api|trpc)(._)"],
};

import { clerkMiddleware, createRouteMatcher } from "@clerk/nextjs/server";
import { NextResponse } from "next/server";

const isProtectedRoute = createRouteMatcher(["/start(.*)"]);

export default clerkMiddleware(
  (auth, request) => {
    if (isProtectedRoute(request)) {
      auth().protect();
    }

    return NextResponse.next();
  },
  { debug: true },
);

export const config = {
  matcher: ["/((?!.+\\.[\\w]+$|_next)._)", "/", "/(api|trpc)(._)"],
};

import { clerkMiddleware, createRouteMatcher } from "@clerk/nextjs/server";
import { NextResponse } from "next/server";

const isProtectedRoute = createRouteMatcher(["/start(.*)"]);

export default clerkMiddleware(
  (auth, request) => {
    if (isProtectedRoute(request)) {
      auth().protect();
    }

    return NextResponse.next();
  },
  { debug: true },
);

export const config = {
  matcher: ["/((?!.+\\.[\\w]+$|_next)._)", "/", "/(api|trpc)(._)"],
};

import { clerkMiddleware, createRouteMatcher } from "@clerk/nextjs/server";
import { NextResponse } from "next/server";

const isProtectedRoute = createRouteMatcher(["/start(.*)"]);

export default clerkMiddleware(
  (auth, request) => {
    if (isProtectedRoute(request)) {
      auth().protect();
    }

    return NextResponse.next();
  },
  { debug: true },
);

export const config = {
  matcher: ["/((?!.+\\.[\\w]+$|_next)._)", "/", "/(api|trpc)(._)"],
};

and creating a tRPC context like this:

const createContext = async (req: NextRequest) => {
  return createTRPCContext({
    headers: req.headers,
    auth: getAuth(req),
  });
};

const createContext = async (req: NextRequest) => {
  return createTRPCContext({
    headers: req.headers,
    auth: getAuth(req),
  });
};

const createContext = async (req: NextRequest) => {
  return createTRPCContext({
    headers: req.headers,
    auth: getAuth(req),
  });
};

const createContext = async (req: NextRequest) => {
  return createTRPCContext({
    headers: req.headers,
    auth: getAuth(req),
  });
};

but i'm constantly getting this error message in my tRPC requests:

            "message": "Clerk: getAuth() was called but Clerk can't detect usage of clerkMiddleware() (or the deprecated authMiddleware()). Please ensure the following:\n-  clerkMiddleware() (or the deprecated authMiddleware()) is used in your Next.js Middleware.\n- Your Middleware matcher is configured to match this route or page.\n- If you are using the src directory, make sure the Middleware file is inside of it.\n\nFor more details, see https://clerk.com/docs/quickstarts/nextjs\n",

            "message": "Clerk: getAuth() was called but Clerk can't detect usage of clerkMiddleware() (or the deprecated authMiddleware()). Please ensure the following:\n-  clerkMiddleware() (or the deprecated authMiddleware()) is used in your Next.js Middleware.\n- Your Middleware matcher is configured to match this route or page.\n- If you are using the src directory, make sure the Middleware file is inside of it.\n\nFor more details, see https://clerk.com/docs/quickstarts/nextjs\n",

            "message": "Clerk: getAuth() was called but Clerk can't detect usage of clerkMiddleware() (or the deprecated authMiddleware()). Please ensure the following:\n-  clerkMiddleware() (or the deprecated authMiddleware()) is used in your Next.js Middleware.\n- Your Middleware matcher is configured to match this route or page.\n- If you are using the src directory, make sure the Middleware file is inside of it.\n\nFor more details, see https://clerk.com/docs/quickstarts/nextjs\n",

            "message": "Clerk: getAuth() was called but Clerk can't detect usage of clerkMiddleware() (or the deprecated authMiddleware()). Please ensure the following:\n-  clerkMiddleware() (or the deprecated authMiddleware()) is used in your Next.js Middleware.\n- Your Middleware matcher is configured to match this route or page.\n- If you are using the src directory, make sure the Middleware file is inside of it.\n\nFor more details, see https://clerk.com/docs/quickstarts/nextjs\n",

anyone had this issue before? Any ideas on how to debug? Any thoughts at all?
I'd be really grateful!

A

Aries•5/1/24, 2:45 AM

I'm not sure how to pass

--remote

--remote

--remote

--remote like you would via wrangler. It doesn't seem like

getPlatformProxy

getPlatformProxy

getPlatformProxy

getPlatformProxy accepts an option for this either?

AAries I'm not sure how to pass ``--remote`` like you would via wrangler. It doesn't se...

H

Hello, I’m Allie!•5/1/24, 7:05 AM

Remote Mode is not supported for Pages

HHello, I’m Allie!Remote Mode is not supported for Pages

A

Aries•5/1/24, 7:10 AM

Unfortunate.

It looks like I cant use React Server Components with Cloudflare Pages and Nextjs right? At least no

Similar Threads

Similar Threads

Similar Threads