This might be an old issue, but I deployed my next js site as static export with next on pages, whe

Ssubscriptions This might be an old issue, but I deployed my next js site as static export with...

S

subscriptionsOP•1/2/24, 4:03 PM

I have fixed this, in case anyone faces a similar issue I wrote an article here https://medium.com/@devakrishna33/eliminating-404-errors-on-dynamic-urls-with-cloudflares-next-on-pages-887c73ca649f

Medium

Eliminating 404 Errors on Dynamic URLs with Cloudflare’s ‘Next on P...

Cloudflare Pages is an efficient and affordable solution for developers to quickly deploy their static websites. It has a solution for…

Ssubscriptions I have fixed this, in case anyone faces a similar issue I wrote an article here ...

J

James•1/2/24, 4:14 PM

For what it's worth, that's not using next-on-pages if you're just deploying a static export.

@cloudflare/next-on-pages

@cloudflare/next-on-pages

@cloudflare/next-on-pages

@cloudflare/next-on-pages generates a worker that would handle incoming requests to your app, and properly route requests to dynamic routes.

JJames For what it's worth, that's not using next-on-pages if you're just deploying a s...

S

subscriptionsOP•1/2/24, 4:16 PM

I think we can still use _redirects with next-on-pages when SSR is not required for some routes.

Ssubscriptions I think we can still use _redirects with next-on-pages when SSR is not required ...

J

James•1/2/24, 4:20 PM

_redirects

_redirects

wouldn't work because the worker takes priority over the redirects in that file

M

mr nooli•1/3/24, 11:01 AM

Is anyone else running into a memory limit on large NextJS apps? pages-helpbuild exceeded memory limit (on a very large NextJS app)

M

mr nooli•1/3/24, 11:01 AM

is there any way to request more memory?

Mmr nooli Is anyone else running into a memory limit on large NextJS apps? https://discord...

E

Erisa•1/3/24, 11:22 AM

We're aware of other reports, if I remember correctly theres a github issue with next somewhere which had the root cause on it

Mmr nooli + is there any way to request more memory?

E

Erisa•1/3/24, 11:23 AM

If you're a paying customer you can submit a support ticket requesting that, making sure to mention the problem and the impact

M

mr nooli•1/3/24, 11:23 AM

I took a look at that but it mentioned that it could happen still for larger applications

M

mr nooli•1/3/24, 11:24 AM

I am paying for the workers plan but to submit a ticket it says I need to be on a business plan or higher (?)

E

Erisa•1/3/24, 11:24 AM

Should be Pro plan or higher for ticket, but theres also a certain threshold of Workers usage that allows you to submit one anyway (the default $5 is not enough)

M

mr nooli•1/3/24, 11:25 AM

Ah well then I’m a bit stuck now

E

Erisa•1/3/24, 11:25 AM

I think your only other option is https://forms.gle/ukpeZVLWLnKeixDu7 but I'm not sure on the timeline for a response on those

Google Docs

Cloudflare Developer Platform: Limit Increase Request Form

Want to increase the limits of your current plan? Let us know what your requirements are here.

M

mr nooli•1/3/24, 11:26 AM

Cheers for that, I’ll submit a ticket

Mmr nooli Is anyone else running into a memory limit on large NextJS apps? https://discord...

V

Village (Josef)•1/3/24, 3:01 PM

Yup, I’m currently paying for GitHub Actions large runners because I need at least 16GB, maybe even 32GB because Next doesn’t know how to use memory efficiently

JJames `_redirects` wouldn't work because the worker takes priority over the redirects ...

S

subscriptionsOP•1/3/24, 4:18 PM

ok thank you

VVillage (Josef)Yup, I’m currently paying for GitHub Actions large runners because I need at lea...

S

subscriptionsOP•1/3/24, 4:19 PM

If you have experience with AWS you can setup self hosted runners using this https://github.com/philips-labs/terraform-aws-github-runner, it's pretty cheap if you use spot instances

V

Village (Josef)•1/3/24, 4:21 PM

I’ll take a look, but at the moment GitHub just takes care of it and I pay a couple cents every build so I’m happy

M

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

Oh fr @Village (Josef) ? Have you got a link to setting up GH actions w/ CF and NextJS? - I don't have too much experience working on CI platforms so might be a bit of a challenge for me

M

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

cos realistically I push like 10-20 times a week (depending on how busy I am) so I've had to start looking into setting up NextJS on AWS w/ OpenNext although I'm running into a bunch of issues there too

V

Village (Josef)•1/3/24, 4:45 PM

Yeah, the hardest part was just that I had to sign up for GitHub Team, then get a runner working

V

Village (Josef)•1/3/24, 4:45 PM

There's a hidden button somewhere to run large runners on public repos I didn't know about so I spent like an hour trying to figure out why my runner wasn't working

V

Village (Josef)•1/3/24, 4:46 PM

After that it was really easy, I just set up the following workflow file and it works like a charm! (NODE_OPTIONS is just set up to give it a higher memory limit)

name: Deploy Production

on:
  push:
    branches:
      - master

jobs:
  deploy:
    runs-on: pages-build
    name: Deploy
    steps:
      - uses: actions/checkout@v3
      - name: Build
        shell: bash
        run: npm ci && npm run pages:build
        env:
          NODE_OPTIONS: ${{ vars.NODE_OPTIONS }}
      - name: Deploy
        uses: cloudflare/wrangler-action@v3
        with:
          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
          command: pages deploy .vercel/output/static --project-name=PROJECT_NAME_HERE

name: Deploy Production

on:
  push:
    branches:
      - master

jobs:
  deploy:
    runs-on: pages-build
    name: Deploy
    steps:
      - uses: actions/checkout@v3
      - name: Build
        shell: bash
        run: npm ci && npm run pages:build
        env:
          NODE_OPTIONS: ${{ vars.NODE_OPTIONS }}
      - name: Deploy
        uses: cloudflare/wrangler-action@v3
        with:
          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
          command: pages deploy .vercel/output/static --project-name=PROJECT_NAME_HERE

name: Deploy Production

on:
  push:
    branches:
      - master

jobs:
  deploy:
    runs-on: pages-build
    name: Deploy
    steps:
      - uses: actions/checkout@v3
      - name: Build
        shell: bash
        run: npm ci && npm run pages:build
        env:
          NODE_OPTIONS: ${{ vars.NODE_OPTIONS }}
      - name: Deploy
        uses: cloudflare/wrangler-action@v3
        with:
          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
          command: pages deploy .vercel/output/static --project-name=PROJECT_NAME_HERE

name: Deploy Production

on:
  push:
    branches:
      - master

jobs:
  deploy:
    runs-on: pages-build
    name: Deploy
    steps:
      - uses: actions/checkout@v3
      - name: Build
        shell: bash
        run: npm ci && npm run pages:build
        env:
          NODE_OPTIONS: ${{ vars.NODE_OPTIONS }}
      - name: Deploy
        uses: cloudflare/wrangler-action@v3
        with:
          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
          command: pages deploy .vercel/output/static --project-name=PROJECT_NAME_HERE

M

mr nooli•1/3/24, 4:47 PM

Ah can you not use github actions on a free org account?

B

Bram•1/3/24, 6:44 PM

pfff, have been debugging for an hour why my binding was undefined (local dev with

next-dev

next-dev

next-dev

next-dev package). Turns out I was calling a server action from a page where I forgot to set the runtime to "edge"...

I wish there was a way to set the default edge runtime to edge instead of nodejs....

M

mr nooli•1/3/24, 7:33 PM

@Bram you can - depending on what you need just mark the root layout file as edge and everything above it will automatically use the edge runtime

M

mr nooli•1/3/24, 7:34 PM

I've put

export const runtime = 'edge' // 'nodejs' (default) | 'edge'

export const runtime = 'edge' // 'nodejs' (default) | 'edge'

export const runtime = 'edge' // 'nodejs' (default) | 'edge'

export const runtime = 'edge' // 'nodejs' (default) | 'edge' inside of my

app/layout.tsx

app/layout.tsx

app/layout.tsx

app/layout.tsx file so everything is edge (unless I've misunderstood the issue you are facing)

Mmr nooli <@208218908543418369> you can - depending on what you need just mark the root la...

B

Bram•1/3/24, 7:35 PM

ah didn't think about that nested inherit the same runtime, but makes sense indeed. Will try that, thanks!

B

Befus•1/3/24, 9:10 PM

I think this would be the best place to ask, I am using cloudflare with mailchannels to send automatic emails. It has worked in previous projects but in my current one I am getting the following error:

Anybody that has any idea? I have tried setting the CORS both in my next config aswell as in the request headers. No luck

V

Village (Josef)•1/3/24, 10:53 PM

If you’re using the workers stuff you can’t do that from the browser

V

Village (Josef)•1/3/24, 10:53 PM

You’d need to send the email from within the worker

B

Befus•1/3/24, 11:41 PM

It gets send from my kv worker so it should work right?

V

Village (Josef)•1/4/24, 12:21 AM

It’s sending from the browser right now not the worker

V

Village (Josef)•1/4/24, 12:22 AM

You’d need to run the fetch in a server section of your Next.js code

D

Donnager•1/4/24, 3:15 AM

n00b Q with DOs:

can't get the next-on-pages binding to register:

    durableObjects: {
      name: "CLOUDFLARE_DO",
      className: "Counter",
      // scriptName: "cloudflare-do",
    },

    durableObjects: {
      name: "CLOUDFLARE_DO",
      className: "Counter",
      // scriptName: "cloudflare-do",
    },

    durableObjects: {
      name: "CLOUDFLARE_DO",
      className: "Counter",
      // scriptName: "cloudflare-do",
    },

    durableObjects: {
      name: "CLOUDFLARE_DO",
      className: "Counter",
      // scriptName: "cloudflare-do",
    },

console warning:

Warning:
You have requested Durable Objects but no local instance of such has been found.
In order to access your Durable Objects please start the relevant workers locally
with `wrangler dev` and then restart the next dev server.

The following bindings won't be accessible until then:
  - name
 - className

Warning:
You have requested Durable Objects but no local instance of such has been found.
In order to access your Durable Objects please start the relevant workers locally
with `wrangler dev` and then restart the next dev server.

The following bindings won't be accessible until then:
  - name
 - className

Warning:
You have requested Durable Objects but no local instance of such has been found.
In order to access your Durable Objects please start the relevant workers locally
with `wrangler dev` and then restart the next dev server.

The following bindings won't be accessible until then:
  - name
 - className

Warning:
You have requested Durable Objects but no local instance of such has been found.
In order to access your Durable Objects please start the relevant workers locally
with `wrangler dev` and then restart the next dev server.

The following bindings won't be accessible until then:
  - name
 - className

DO local worker config (code works with wrangler dev and also deployed):

[[durable_objects.bindings]]
name = "CLOUDFLARE_DO"
class_name = "Counter"

[[durable_objects.bindings]]
name = "CLOUDFLARE_DO"
class_name = "Counter"

[[durable_objects.bindings]]
name = "CLOUDFLARE_DO"
class_name = "Counter"

[[durable_objects.bindings]]
name = "CLOUDFLARE_DO"
class_name = "Counter"

Simple component:

const DurableObjectPage = async ({}: DurableObjectPageProps) => {
  console.log(process.env.CLOUDFLARE_DO);
  const res = await process.env.CLOUDFLARE_DO.fetch();
  console.log({ res });
  return (
    <>
      <h1>Durable Object</h1>
      {res}
    </>
  );
};

export default DurableObjectPage;

const DurableObjectPage = async ({}: DurableObjectPageProps) => {
  console.log(process.env.CLOUDFLARE_DO);
  const res = await process.env.CLOUDFLARE_DO.fetch();
  console.log({ res });
  return (
    <>
      <h1>Durable Object</h1>
      {res}
    </>
  );
};

export default DurableObjectPage;

const DurableObjectPage = async ({}: DurableObjectPageProps) => {
  console.log(process.env.CLOUDFLARE_DO);
  const res = await process.env.CLOUDFLARE_DO.fetch();
  console.log({ res });
  return (
    <>
      <h1>Durable Object</h1>
      {res}
    </>
  );
};

export default DurableObjectPage;

const DurableObjectPage = async ({}: DurableObjectPageProps) => {
  console.log(process.env.CLOUDFLARE_DO);
  const res = await process.env.CLOUDFLARE_DO.fetch();
  console.log({ res });
  return (
    <>
      <h1>Durable Object</h1>
      {res}
    </>
  );
};

export default DurableObjectPage;

^--- undefined / cannot read properties of undefined

if there is a template/example or doc please do not hesitate to point that out to me!

VVillage (Josef)You’d need to run the fetch in a server section of your Next.js code

B

Befus•1/4/24, 9:22 AM

You are right damn, I didn't even notice, the fetch is being called in a client side component

J

jmak•1/4/24, 5:15 PM

Hi whenever I try to build on cloudflare, I am running into these errors:

12:12:23.387    Detected the following tools from environment: npm@9.6.7, nodejs@18.17.1
12:12:23.388    Installing project dependencies: npm clean-install --progress=false
12:12:27.033    npm ERR! code ERESOLVE
12:12:27.042    npm ERR! ERESOLVE could not resolve
12:12:27.042    npm ERR! 
12:12:27.043    npm ERR! While resolving: @material-ui/core@4.12.4
12:12:27.043    npm ERR! Found: @types/react@18.2.45
12:12:27.043    npm ERR! node_modules/@types/react
12:12:27.043    npm ERR!   dev @types/react@"^18" from the root project
12:12:27.043    npm ERR!   peerOptional @types/react@"*" from @material-ui/types@5.1.0
12:12:27.044    npm ERR!   node_modules/@material-ui/types

12:12:23.387    Detected the following tools from environment: npm@9.6.7, nodejs@18.17.1
12:12:23.388    Installing project dependencies: npm clean-install --progress=false
12:12:27.033    npm ERR! code ERESOLVE
12:12:27.042    npm ERR! ERESOLVE could not resolve
12:12:27.042    npm ERR! 
12:12:27.043    npm ERR! While resolving: @material-ui/core@4.12.4
12:12:27.043    npm ERR! Found: @types/react@18.2.45
12:12:27.043    npm ERR! node_modules/@types/react
12:12:27.043    npm ERR!   dev @types/react@"^18" from the root project
12:12:27.043    npm ERR!   peerOptional @types/react@"*" from @material-ui/types@5.1.0
12:12:27.044    npm ERR!   node_modules/@material-ui/types

12:12:23.387    Detected the following tools from environment: npm@9.6.7, nodejs@18.17.1
12:12:23.388    Installing project dependencies: npm clean-install --progress=false
12:12:27.033    npm ERR! code ERESOLVE
12:12:27.042    npm ERR! ERESOLVE could not resolve
12:12:27.042    npm ERR! 
12:12:27.043    npm ERR! While resolving: @material-ui/core@4.12.4
12:12:27.043    npm ERR! Found: @types/react@18.2.45
12:12:27.043    npm ERR! node_modules/@types/react
12:12:27.043    npm ERR!   dev @types/react@"^18" from the root project
12:12:27.043    npm ERR!   peerOptional @types/react@"*" from @material-ui/types@5.1.0
12:12:27.044    npm ERR!   node_modules/@material-ui/types

12:12:23.387    Detected the following tools from environment: npm@9.6.7, nodejs@18.17.1
12:12:23.388    Installing project dependencies: npm clean-install --progress=false
12:12:27.033    npm ERR! code ERESOLVE
12:12:27.042    npm ERR! ERESOLVE could not resolve
12:12:27.042    npm ERR! 
12:12:27.043    npm ERR! While resolving: @material-ui/core@4.12.4
12:12:27.043    npm ERR! Found: @types/react@18.2.45
12:12:27.043    npm ERR! node_modules/@types/react
12:12:27.043    npm ERR!   dev @types/react@"^18" from the root project
12:12:27.043    npm ERR!   peerOptional @types/react@"*" from @material-ui/types@5.1.0
12:12:27.044    npm ERR!   node_modules/@material-ui/types

J

jmak•1/4/24, 5:15 PM

however, when I run npm clean-install locally, everything is working properly

J

jmak•1/4/24, 5:16 PM

anyu advice?

A

AA•1/4/24, 9:04 PM

Revaluation like this actually wont work on pages will it? https://nextjs.org/docs/app/building-your-application/caching#time-based-revalidation

Building Your Application: Caching | Next.js

An overview of caching mechanisms in Next.js.