<@208218908543418369> you can - depending on what you need just mark the root layout file as edge an

M

mr nooliOP•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.

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

JJames You can use `{ next: { revalidate: ... } }`

A

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

not familiar.. investigating

A

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

where does that go?

A

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

oh as part of the fetch call..

J

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

Yeah like in the docs you linked

A

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

When you opt for a route to be revalidated on an interval (export const revalidate = 10;),

When you opt for a route to be revalidated on an interval (export const revalidate = 10;),

When you opt for a route to be revalidated on an interval (export const revalidate = 10;),

When you opt for a route to be revalidated on an interval (export const revalidate = 10;),

A

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

looks like you can just set it for the page.. thats interesting

J

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

Yeah. Tbh I've never tried the page level one before

A

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

i wish i understood the wizardry cloudflare is doing to make this work.. like how is it caching this info without keeping it running like in node

J

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

Regarding fetch request caching in next-on-pages, we store the response in the workers cache API (this is configurable) when nextjs asks us to, and retrieve data from the cache API when nextjs asks us to. Obviously there's more going on under the hood, but that's the very simple explanation

A

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

oh, maybe this doesnt work..

A

Andrew Murphy•1/4/24, 10:22 PM

Yeah you can't use revalidate with next on pages

<@208218908543418369> you can - depending on what you need just mark the root layout file as edge an

Similar Threads

Similar Threads

Similar Threads