Yup, I’m currently paying for GitHub Actions large runners because I need at least 16GB, maybe even

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

S

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

subscriptions•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)OP•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)OP•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)OP•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)OP•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)OP•1/3/24, 10:53 PM

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

V

Village (Josef)OP•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)OP•1/4/24, 12:21 AM

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

V

Village (Josef)OP•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.

A

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

(I'm running into some crazy caching issues that seem to survive rebuilds)

A

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

does pages have some sort of shared cache?

JJames Try putting `cache: 'no-store'` in your fetch. by default, nextjs tries to cache...

A

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

oh, you're mostly talking about my challenge.. is there a way to make it only store at build time?

A

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

or only revalidate every day or so

AAA Revaluation like this actually wont work on pages will it? https://nextjs.org/d...

B

Befus•1/4/24, 9:38 PM

Why are you still using pages tho?

BBefus Why are you still using pages tho?

A

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

I'm not sure I understand the question

AAA I'm not sure I understand the question

B

Befus•1/4/24, 9:46 PM

Why are you using pages instead of the app router?

BBefus Why are you using pages instead of the app router?

A

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

Haha. Overloaded terms. I'm using cloudflare pages and nextjs app router

A

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

I'm not using nextjs pages directory

B

Befus•1/4/24, 9:47 PM

Ohhhh hahahah, I think it should work

B

Befus•1/4/24, 9:47 PM

when or why do you need to revalidate every day?

A

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

So I'm pulling content from a CMS (directus). For some reason right now it's not pulling new content even if I rebuild on cloudflare... That's the biggest issue.

B

Befus•1/4/24, 9:49 PM

Have you looked at a binding?

A

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

I can replicate this problem locally and fix it by deleting my .nextjs directory

A

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

A binding?

B

Befus•1/4/24, 9:50 PM

Do you build staticly?

A

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

No. I use cloudflare-on-pages. Some of the site isnt static

B

Befus•1/4/24, 9:50 PM

B

Befus•1/4/24, 9:51 PM

This is what I meant its a deploy hook instead of binding lol

A

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

Oh. Yes.. I can do that. But it's not refreshing my content somehow.

A

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

if i do a run fetch with no-cache, the content is updated..

B

Befus•1/4/24, 9:55 PM

Ah then you should do edge routing I think

A

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

Think I just need to understand how server side caching of (fetch) works in nextjs on cloudflare pages.

AAA or only revalidate every day or so

J

James•1/4/24, 10:12 PM

You can use

{ next: { revalidate: ... } }

{ next: { revalidate: ... } }

{ next: { revalidate: ... } }

{ next: { revalidate: ... } }

AAA Revaluation like this actually wont work on pages will it? https://nextjs.org/d...

J

James•1/4/24, 10:12 PM

It should work

Yup, I’m currently paying for GitHub Actions large runners because I need at least 16GB, maybe even

Similar Threads

Similar Threads

Similar Threads