I have fixed this, in case anyone faces a similar issue I wrote an article here https://medium.com/@

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

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

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'

inside of my

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"

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.