Hey friends, my Next.js project is having issues with the blog page after deployment. When I click o

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

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

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

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

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

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

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

Z

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

or the blog page?

A

akazwz•7/24/24, 5:02 PM

try some bundle analyzer tools: https://nextjs.org/docs/app/building-your-application/optimizing/bundle-analyzer

Optimizing: Bundle Analyzer | Next.js

Analyze the size of your JavaScript bundles using the @next/bundle-analyzer plugin.

Aakazwz try some bundle analyzer tools: https://nextjs.org/docs/app/building-your-applic...

Z

ZaneOP•7/24/24, 5:02 PM

I'll try it, thanks.

F

FrostTaco•7/25/24, 11:16 PM

I'm getting this error, despite using generateStaticParams and using

export const dynamicParams = false;

export const dynamicParams = false;

export const dynamicParams = false;

export const dynamicParams = false;
Is there anything else necessary to use SSG?

F

FrostTaco•7/25/24, 11:24 PM

Actually looks like it's this issue

https://github.com/cloudflare/next-on-pages/issues/833
installing vercel@35.0.0 fixed it

Ppowermikee1 Hi guys has anyone managed to get durable objects running with next pages? Firs...

A

ayming.•7/26/24, 5:36 AM

I am facing the same problem. Did you solve it?

I

Ian•7/26/24, 10:39 AM

Hi folks, also posted this in Clerk's Discord but this seems related to CloudPages too so hoping someone may be able to help.

The following code will run correctly if I use the Clerk 5.1.6 libraries but not on 5.2.6. If I comment out 'export const runtime= 'experimental-edge' it builds / runs, but not if uncommented. I'm running on Cloudflare Pages which won't build unless I have 'export const runtime= 'experimental-edge' in test.tsx. I also get hydration errors running locally in dev mode unless I comment it out.

I've dug around a lot - can't fix it. Made this ultra simple page in an attempt to eliminate as much as possible. I assume I'm making a mistake here? Grateful for any pointers / help. App is wrapped in <ClerkProvider>, using the Pages Router, middleware file configured as per docs using latest middleware and have protected routes including /test.

import { getAuth, buildClerkProps } from "@clerk/nextjs/server";
import { GetServerSideProps } from "next";
import { ReactElement } from "react";

interface TestProps {
  userId: string | null;
}

export const runtime = 'experimental-edge';

const Test = ({ userId }: TestProps): ReactElement => {
  return (
    <div>
      <h1>User Data</h1>
      <p>User ID: {userId || "Not signed in"}</p>
    </div>
  )
}

export default Test;

export const getServerSideProps: GetServerSideProps = async (ctx) => {
  const { userId } = getAuth(ctx.req);

  return { 
    props: { 
      userId: userId || null,
      ...buildClerkProps(ctx.req)
    } 
  };
};

import { getAuth, buildClerkProps } from "@clerk/nextjs/server";
import { GetServerSideProps } from "next";
import { ReactElement } from "react";

interface TestProps {
  userId: string | null;
}

export const runtime = 'experimental-edge';

const Test = ({ userId }: TestProps): ReactElement => {
  return (
    <div>
      <h1>User Data</h1>
      <p>User ID: {userId || "Not signed in"}</p>
    </div>
  )
}

export default Test;

export const getServerSideProps: GetServerSideProps = async (ctx) => {
  const { userId } = getAuth(ctx.req);

  return { 
    props: { 
      userId: userId || null,
      ...buildClerkProps(ctx.req)
    } 
  };
};

import { getAuth, buildClerkProps } from "@clerk/nextjs/server";
import { GetServerSideProps } from "next";
import { ReactElement } from "react";

interface TestProps {
  userId: string | null;
}

export const runtime = 'experimental-edge';

const Test = ({ userId }: TestProps): ReactElement => {
  return (
    <div>
      <h1>User Data</h1>
      <p>User ID: {userId || "Not signed in"}</p>
    </div>
  )
}

export default Test;

export const getServerSideProps: GetServerSideProps = async (ctx) => {
  const { userId } = getAuth(ctx.req);

  return { 
    props: { 
      userId: userId || null,
      ...buildClerkProps(ctx.req)
    } 
  };
};

import { getAuth, buildClerkProps } from "@clerk/nextjs/server";
import { GetServerSideProps } from "next";
import { ReactElement } from "react";

interface TestProps {
  userId: string | null;
}

export const runtime = 'experimental-edge';

const Test = ({ userId }: TestProps): ReactElement => {
  return (
    <div>
      <h1>User Data</h1>
      <p>User ID: {userId || "Not signed in"}</p>
    </div>
  )
}

export default Test;

export const getServerSideProps: GetServerSideProps = async (ctx) => {
  const { userId } = getAuth(ctx.req);

  return { 
    props: { 
      userId: userId || null,
      ...buildClerkProps(ctx.req)
    } 
  };
};

IIan Hi folks, also posted this in Clerk's Discord but this seems related to CloudPag...

I

ItsWendell•7/26/24, 12:53 PM

What version of Next.js are you on? I think experimental-edge is not experimental anymore for a while now, so try 'edge' instead of 'experimental-edge'

IItsWendell What version of Next.js are you on? I think experimental-edge is not experimenta...

I

Ian•7/26/24, 3:38 PM

Thanks but AFAIK 'edge' in api routes 'experimental-edge' still on pages. Looks like a regression in Clerk.

FFrostTaco I'm getting this error, despite using generateStaticParams and using `export con...

J

James•7/26/24, 5:40 PM

i'll give dario a nudge to merge my fix

I

Ian•7/28/24, 11:12 AM

I'm having a ridiculous amount of trouble getting the simplest of pages functions to work on a nextjs project deployed on cloudflare(has been great). To see if I could figure it out I made a brand new project (following the docs to the letter) using 'npm create cloudflare@latest my-next-app -- --framework=next' - as I am using the Pages router I chose that option during the build. Works fine, deploys fine, the basic /api/hello route returns the expected hello world text. I have setupDevPlatform() in place. Then following the docs I created a /functions directory and added the basic code supplied

export function onRequest(context) {
  return new Response("Hello, world!")
}

export function onRequest(context) {
  return new Response("Hello, world!")
}

export function onRequest(context) {
  return new Response("Hello, world!")
}

export function onRequest(context) {
  return new Response("Hello, world!")
}

which just seems to be ignored. It's seemingly not recognised when it is added, it's not available in the way that /api/hello is on api/helloworld (404), running npm run preview makes no difference. I've crawled all over the docs - can someone please point me in the right direction? Have added a few files with my setup.

package.json995B

next.config.mjs552B

wrangler.toml3.52KB

IItsWendell What version of Next.js are you on? I think experimental-edge is not experimenta...

I

Ian•7/28/24, 11:14 AM

Seems it's 'edge' if you are on the app router, 'experimental-edge' on the pages router.

IIan I'm having a ridiculous amount of trouble getting the simplest of pages function...

J

James•7/28/24, 11:46 AM

you can't use pages functions if you're using next-on-pages - you need to use nextjs API routes instead

JJames you can't use pages functions if you're using next-on-pages - you need to use ne...

I

Ian•7/28/24, 11:51 AM

Haha - be nice if that was mentioned somewhere prominent. Where might I find some guidance on integrating D1 using api routes? Am I still required to use bindings etc etc?

JJames you can't use pages functions if you're using next-on-pages - you need to use ne...

I

Ian•7/28/24, 12:44 PM

Ok, turns out that was very easy - thank you for the information James.

J

James•7/28/24, 5:00 PM

No worries

Bbun i've been encountering some weird issue, has anyone else had anything similar? ...

B

Bjarn•7/29/24, 7:43 AM

Searching through the chat logs here I saw your message. Wanted to share some more on this.

I also have this same issue, and shared it on the Nextjs discord and apparently others also have this on just Cloudflare:
https://discord.com/channels/752553802359505017/1267103626967650375

Normally I would create a Github Issue but honestly I have no clue what the reproduction steps are. It happens with the bare minimum already.

B

Bjarn•7/29/24, 7:43 AM

I'm unable to find any additional information in the logs on CF Pages either

B

bun•7/29/24, 8:25 AM

yeah its a weird bug, specific to cloudflare, but unless you forcefully refresh your website, it doesnt occur on it's own

V

villainy•7/29/24, 3:22 PM

17:20:13.217    ▲  Traced Next.js server files in: 350.916ms
17:20:13.293    ▲  Created all serverless functions in: 75.798ms
17:20:17.060    ▲  Collected static files (public/, static/, .next/static): 8.876ms
17:20:17.580    ▲  Build Completed in .vercel/output [1m]
17:20:18.797    ⚡️ Completed `pnpm dlx vercel build`.
17:20:22.087    ⚡️ Unexpected error: Unexpected character '�' (156:302845)
17:20:23.000    Failed: Error while executing user command. Exited with error code: 1
17:20:23.012    Failed: build command exited with code: 1
17:20:24.263    Failed: error occurred while running build command

17:20:13.217    ▲  Traced Next.js server files in: 350.916ms
17:20:13.293    ▲  Created all serverless functions in: 75.798ms
17:20:17.060    ▲  Collected static files (public/, static/, .next/static): 8.876ms
17:20:17.580    ▲  Build Completed in .vercel/output [1m]
17:20:18.797    ⚡️ Completed `pnpm dlx vercel build`.
17:20:22.087    ⚡️ Unexpected error: Unexpected character '�' (156:302845)
17:20:23.000    Failed: Error while executing user command. Exited with error code: 1
17:20:23.012    Failed: build command exited with code: 1
17:20:24.263    Failed: error occurred while running build command

17:20:13.217    ▲  Traced Next.js server files in: 350.916ms
17:20:13.293    ▲  Created all serverless functions in: 75.798ms
17:20:17.060    ▲  Collected static files (public/, static/, .next/static): 8.876ms
17:20:17.580    ▲  Build Completed in .vercel/output [1m]
17:20:18.797    ⚡️ Completed `pnpm dlx vercel build`.
17:20:22.087    ⚡️ Unexpected error: Unexpected character '�' (156:302845)
17:20:23.000    Failed: Error while executing user command. Exited with error code: 1
17:20:23.012    Failed: build command exited with code: 1
17:20:24.263    Failed: error occurred while running build command

17:20:13.217    ▲  Traced Next.js server files in: 350.916ms
17:20:13.293    ▲  Created all serverless functions in: 75.798ms
17:20:17.060    ▲  Collected static files (public/, static/, .next/static): 8.876ms
17:20:17.580    ▲  Build Completed in .vercel/output [1m]
17:20:18.797    ⚡️ Completed `pnpm dlx vercel build`.
17:20:22.087    ⚡️ Unexpected error: Unexpected character '�' (156:302845)
17:20:23.000    Failed: Error while executing user command. Exited with error code: 1
17:20:23.012    Failed: build command exited with code: 1
17:20:24.263    Failed: error occurred while running build command

How would i debug this? only hapens on deployment and not when building localy

V

villainy•7/29/24, 3:27 PM

havent updated anything, it just happened on a random commit that changed some text

V

villainy•7/29/24, 3:43 PM

retrying deployment 2 times somehow fixed it...

S

Swyftey•7/29/24, 6:32 PM

How can I still use my nginx proxy with this?

S

Swyftey•7/29/24, 6:32 PM

My frontend should be port 8080, backend port 3000

using paths, not subdomains

J

josephgu•7/30/24, 9:08 AM

Hi everyone, I'm getting an error when deploying after creating a new Next.js project using C3:npm run preview

next-cf-demo@0.1.0 preview
npm run pages:build && wrangler pages dev

next-cf-demo@0.1.0 pages:build
npx @cloudflare/next-on-pages

...

Completed

npx vercel build

npx vercel build

npx vercel build

npx vercel build.
✘ [ERROR] Could not resolve "pcre-to-regexp/dist/index.js"

node_modules/@cloudflare/next-on-pages/templates/_worker.js/utils/pcre.ts:5:23:
5 │ import createPCRE from 'pcre-to-regexp/dist/index.js';
╵ ~~~~~~

The Yarn Plug'n'Play manifest forbids importing "pcre-to-regexp" here because it's not listed as a
dependency of this package:

../../../.pnp.cjs:36:31:
36 │ "packageDependencies": [\
╵

You can mark the path "pcre-to-regexp/dist/index.js" as external to exclude it from the bundle,
which will remove this error.

✘ [ERROR] Could not resolve "cookie"

node_modules/@cloudflare/next-on-pages/templates/_worker.js/routes-matcher.ts:1:22:
1 │ import { parse } from 'cookie';
╵ ~~

The Yarn Plug'n'Play manifest forbids importing "cookie" here because it's not listed as a
dependency of this package:

../../../.pnp.cjs:36:31:
36 │ "packageDependencies": [\
╵ ~~

You can mark the path "cookie" as external to exclude it from the bundle, which will remove this
error.

Unexpected error: Build failed with 2 errors:

node_modules/@cloudflare/next-on-pages/templates/_worker.js/routes-matcher.ts:1:22: ERROR: Could not resolve "cookie"

node_modules/@cloudflare/next-on-pages/templates/_worker.js/utils/pcre.ts:5:23: ERROR: Could not resolve "pcre-to-regexp/dist/index.js"

KKyzer src/types/cloudflare-env.ts ```javascript interface CloudflareEnv { DB: D1Data...

T

trace•7/30/24, 11:04 AM

Hey, do you have any public repo with this implementation? I have been trying but has not been very successful. Thanks

K

Kyzer•7/30/24, 12:48 PM

Nah not really sorry, it should still be the same still from memory just using

npm run dev

npm run dev

npm run dev

npm run dev

, getting any error?

K

Kyzer•7/30/24, 12:48 PM

I think the only issue i've had with it, is trying to use --turbo when running npm run dev which doesn't work with the auth js beta-19

KKyzer Nah not really sorry, it should still be the same still from memory just using `...

T

trace•7/30/24, 1:20 PM

Ahh gotcha. I think I am messing by while connecting to the d1 db. Let me try a bit more tho

H

Haysquare•7/30/24, 1:59 PM

Hello there
I'm having issue connecting my github account to my cloudflare pages for deployment, i keep getting
an error occurred, i should contact

H

Haysquare•7/30/24, 2:20 PM

hello there

Hey friends, my Next.js project is having issues with the blog page after deployment. When I click o

Similar Threads

Similar Threads

Similar Threads