my next js project building fine locally, but on cloudlfare, it keeps on building for hours, but doe

C

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

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

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

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

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.

Lloco I have part of the error still in clipboard since i no longer have it installed....

D

Deo Kumar•5/1/24, 2:24 PM

I think it can be fixed by exporting the edge runtime constant from api route.
Or if you are using node environment, you can simply swap to "@cf-wasm/og/node" and use

render

render

function

L

laurent•5/1/24, 3:43 PM

has anyone managed to store the logs of their next-on-pages app?
I'm just looking for a stored version of what you get with

wrangler pages deployment tail

wrangler pages deployment tail

https://developers.cloudflare.com/pages/functions/debugging-and-logging/#view-logs-with-wrangler

Cloudflare Docs

Debugging and logging · Cloudflare Pages docs

Access your Functions logs by using the Cloudflare dashboard or the Wrangler CLI.

VVarna Is it me or Next is "handling" errors instead of actually throwing anything usef...

B

bun•5/1/24, 8:36 PM

facing same issue on a specific action.

B

bun•5/1/24, 8:36 PM

@Varna did you find any solutions to your problem?

Bbun <@210306315677859852> did you find any solutions to your problem?

V

Varna•5/1/24, 8:38 PM

next@14.2.0 deployed on cf pages introduces a bug. You need to downgrade to 14.1.4

V

Varna•5/1/24, 8:39 PM

At least in my case. Actions used in client components don't work from that version

B

bun•5/1/24, 8:40 PM

i had next@14.2.2 working with the following client side component with the following form:

and many others throughout my codebase, however it doesn't work for a github oauth button i've made for some reason

B

bun•5/1/24, 8:40 PM

signIn

signIn

is a server action here

V

Varna•5/1/24, 8:42 PM

Brb, gonna get my laptop

Bbun i had next@14.2.2 working with the following client side component with the foll...

V

Varna•5/1/24, 8:47 PM

does it work in dev and fail while deployed?

VVarna does it work in dev and fail while deployed?

B

bun•5/1/24, 8:47 PM

nope that works perfectly

E

Eusebio Trigo•5/2/24, 9:29 AM

Crossposting here as it is not as broad as pages, I have an application deployed on cloudflare pages, using nextjs and https://github.com/QuiiBz/next-international. In local, switching languages works OK, and it is kept through navigation. Once the user (me) starts navigating, the selected locale is forgotten: pages-helpUsing next-international makes the app forget the language.

A

andrea_bhweb•5/2/24, 1:39 PM

Hi, it seems that forcing CF to 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 potentially seconds (depending on the app) instead of milliseconds. Is this a known issue? Is there a config I can operate to have both CF full page cache and page streaming?

M

Mick•5/3/24, 12:40 AM

Have we got a solution yet for static pages requiring

export const runtime = 'edge'

export const runtime = 'edge'

no matter what? I have many pages which are static and I have to mark them as edge runtime and that produces functions for them and now my project won't upload saying it's over the limit

M

Mick•5/3/24, 12:54 AM

Additional troubleshooting, I logged out of wrangler from my terminal,

pnpm i wrangler@3.53.1

pnpm i wrangler@3.53.1

(I was on 3.53.0), logged back into wrangler, I also deleted the .next folder and now the file sizes are great again. Even the hidden files further up in the screenshots which were 1.1xx MB are basically all under 100kb, biggest one I can see is 400kb-ish and it deployed successfully. Can someone explain this and my question above about 'edge' runtime, half of those functions wouldn't be needed if the pages were allowed to be static

Screenshot_2024-05-03_at_10.49.36_AM.png

Screenshot_2024-05-03_at_10.50.57_AM.png

MMatt hey all, anyone have any experience with using durable objects from within next ...

C

cj•5/3/24, 6:58 AM

~~Did you get this working? Do DOs work on next-on-pages?~~

No DOs don't work on next-on-pages. DOs have to be run as a separate project (locally DO in one terminal and next-on-pages in another terminal)

DDario this is what we've got 😓 : https://github.com/cloudflare/next-on-pages/tree/mai...

C

cj•5/3/24, 10:15 AM

I am trying to access a

DO

DO

from a

next-on-pages

next-on-pages

app (with the DO running on a second terminal - hono.dev app).

But I can't use RPC to call the DO functions. I get this error

Error: Cannot access `Counter#getCounterValue` as Durable Object RPC is not yet supported between multiple `wrangler dev` sessions.

Error: Cannot access `Counter#getCounterValue` as Durable Object RPC is not yet supported between multiple `wrangler dev` sessions.

This is the code I used to access the DO

export async function GET(request: NextRequest) {
  const counterId = getRequestContext().env.COUNTERS.idFromName('A');
  const stub = getRequestContext().env.COUNTERS.get(counterId);

  const counterValue = await stub.getCounterValue()

  return new Response(counterValue)
}

export async function GET(request: NextRequest) {
  const counterId = getRequestContext().env.COUNTERS.idFromName('A');
  const stub = getRequestContext().env.COUNTERS.get(counterId);

  const counterValue = await stub.getCounterValue()

  return new Response(counterValue)
}

export async function GET(request: NextRequest) {
  const counterId = getRequestContext().env.COUNTERS.idFromName('A');
  const stub = getRequestContext().env.COUNTERS.get(counterId);

  const counterValue = await stub.getCounterValue()

  return new Response(counterValue)
}

export async function GET(request: NextRequest) {
  const counterId = getRequestContext().env.COUNTERS.idFromName('A');
  const stub = getRequestContext().env.COUNTERS.get(counterId);

  const counterValue = await stub.getCounterValue()

  return new Response(counterValue)
}

Here is the example repo you can run to recreate this error
https://github.com/clmnin/next-on-pages-DO-RPC

C

cj•5/3/24, 10:15 AM

How should I be accessing the DO from the next-on-pages app?

C

cj•5/3/24, 10:18 AM

Also how to use types?

I added

env.d.ts

env.d.ts

import { type Counter } from '@packages/counterdo';
interface CloudflareEnv {
  COUNTERS: DurableObjectNamespace<Counter>
}

import { type Counter } from '@packages/counterdo';
interface CloudflareEnv {
  COUNTERS: DurableObjectNamespace<Counter>
}

import { type Counter } from '@packages/counterdo';
interface CloudflareEnv {
  COUNTERS: DurableObjectNamespace<Counter>
}

import { type Counter } from '@packages/counterdo';
interface CloudflareEnv {
  COUNTERS: DurableObjectNamespace<Counter>
}

But in line

const counterId = getRequestContext().env.COUNTERS.idFromName('A');

const counterId = getRequestContext().env.COUNTERS.idFromName('A');

const counterId = getRequestContext().env.COUNTERS.idFromName('A');

const counterId = getRequestContext().env.COUNTERS.idFromName('A');

I get the error

Property 'COUNTERS' does not exist on type 'CloudflareEnv'.ts(2339)

Property 'COUNTERS' does not exist on type 'CloudflareEnv'.ts(2339)

Ccj I am trying to access a `DO` from a `next-on-pages` app (with the DO running on ...

I

Isaac McFadyen•5/3/24, 12:54 PM

As the error says, you can't call RPC functions between a DO in one

wrangler dev

wrangler dev

session and a Worker (or Next in this case) in another session

IIsaac McFadyen As the error says, you can't call RPC functions between a DO in one `wrangler de...

D

Dario•5/3/24, 1:00 PM

yes exactly

and that is the only way to get hold of a DO in next-on-pages

IIsaac McFadyen As the error says, you can't call RPC functions between a DO in one `wrangler de...

C

cj•5/3/24, 4:09 PM

Yes sorry. I didn't know we could use HTTP. And I forgot to update my comment here on discord

DDario yes exactly 😓 and that is the only way to get hold of a DO in next-on-pages �...

C

cj•5/3/24, 4:10 PM

How do I fix the type issue though?

Also, there are no docs on how to use DO with next-on-pages. I had to dig through discord to find "how to do it"

C

cj•5/3/24, 4:13 PM

Right now, I've moved all the APIs to a separate worker project.

One more question:
Does a worker with DO in wrangler mean it will get deployed in a data center with DO available? I live in India and the nearest DO is in Singapore, so will this worker get deployed in Singapore for a user pinging from India?

Ccj Right now, I've moved all the APIs to a separate worker project. One more quest...

H

Hello, I’m Allie!•5/3/24, 4:20 PM

No, the Worker will spawn in the nearest colo on request, then send packets onward to a DO colo

G

GM•5/3/24, 6:52 PM

Does someone How to fetch data from D1 database to react app using cloudflare RESTAPI?

M

Matt•5/4/24, 3:26 AM

hey all - any ideas on how to update my favicon? i replaced my favicon.ico and redeployed but looks like im still getting the original

MMatt hey all - any ideas on how to update my favicon? i replaced my favicon.ico and r...

C

cj•5/4/24, 5:12 AM

Being a static asset, it might be cached. I think by default cf caches assets for 4 hours.

N

nettica•5/4/24, 5:33 AM

favicons are notoriously hard to clear. i'd google it

Ccj Being a static asset, it might be cached. I think by default cf caches assets fo...

M

Matt•5/4/24, 5:50 AM

thanks CJ, I don't suppose there's a manual way to expire it in the meantime?

MMatt thanks CJ, I don't suppose there's a manual way to expire it in the meantime?

C

cj•5/4/24, 8:07 AM

Time fixes everything

F

Frontline Genesis•5/4/24, 12:03 PM

Hi everyone, I think this is the right place to post this. I'm currently in the process or migrating from Vercel to Pages, and everything has going super smooth so far, apart from Image optimization. I use the /cdn-cgi custom loader from the dev docs:

const normalizeSrc = src => {
  return src.startsWith('/') ? src.slice(1) : src;
};

export default function cloudflareLoader ({ src, width, quality }) {
  const params = [`width=${width}`];
  if (quality) {
    params.push(`quality=${quality}`);
  }
  const paramsString = params.join(',');
  return `/cdn-cgi/image/${paramsString}/${normalizeSrc(src)}`;
};

const normalizeSrc = src => {
  return src.startsWith('/') ? src.slice(1) : src;
};

export default function cloudflareLoader ({ src, width, quality }) {
  const params = [`width=${width}`];
  if (quality) {
    params.push(`quality=${quality}`);
  }
  const paramsString = params.join(',');
  return `/cdn-cgi/image/${paramsString}/${normalizeSrc(src)}`;
};

const normalizeSrc = src => {
  return src.startsWith('/') ? src.slice(1) : src;
};

export default function cloudflareLoader ({ src, width, quality }) {
  const params = [`width=${width}`];
  if (quality) {
    params.push(`quality=${quality}`);
  }
  const paramsString = params.join(',');
  return `/cdn-cgi/image/${paramsString}/${normalizeSrc(src)}`;
};

const normalizeSrc = src => {
  return src.startsWith('/') ? src.slice(1) : src;
};

export default function cloudflareLoader ({ src, width, quality }) {
  const params = [`width=${width}`];
  if (quality) {
    params.push(`quality=${quality}`);
  }
  const paramsString = params.join(',');
  return `/cdn-cgi/image/${paramsString}/${normalizeSrc(src)}`;
};

but all optimized images return a 404 (example below)

source image (works fine):

https://summit7-media.pages.dev/splash.png

https://summit7-media.pages.dev/splash.png

optimized image (404 error):

https://summit7-media.pages.dev/cdn-cgi/image/width=96/splash.png

https://summit7-media.pages.dev/cdn-cgi/image/width=96/splash.png

is there anything I am doing wrong here? Any and all help appreciated!

FFrontline Genesis Hi everyone, I think this is the right place to post this. I'm currently in the ...

N

Nob•5/4/24, 12:46 PM

you can't use image optimization with pages.dev pages

N

Nob•5/4/24, 12:47 PM

its only with your domain

NNob you can't use image optimization with pages.dev pages

F

Frontline Genesis•5/4/24, 1:02 PM

Oh right, thanks

Ccj Time fixes everything

M

Matt•5/4/24, 6:27 PM

12 hrs later and my icon has no changed

why has time forsaken me?

MMatt 12 hrs later and my icon has no changed 😦 why has time forsaken me?

F

Frontline Genesis•5/4/24, 7:42 PM

Add ?v=2 to the end for the time being, should get browser's to refetch it. The new path should be /favicon.ico?v=2

B

bun•5/4/24, 9:01 PM

anyone using baselime with next-on-pages? if so, how?

J

James•5/4/24, 9:28 PM

nope

W

whois | API man•5/4/24, 9:45 PM

Hello! Someone told me it would be best to ask over here.

Would Dynamic Routing and Text Animations consume my daily CF Pages requests?

my next js project building fine locally, but on cloudlfare, it keeps on building for hours, but doe

Similar Threads

Similar Threads

Similar Threads