I am not sure but I think you explicitly need to create a not-found page and export runtime constant

J

James•4/10/24, 7:46 AM

It won't be available in local. I don't think there would be a simple way to make it work because the output directory doesn't exist yet with next dev

DDeo Kumar I am not sure but I think you explicitly need to create a not-found page and exp...

A

AA•4/10/24, 12:36 PM

yes. that was the fix, pretty interesting

AAA yes. that was the fix, pretty interesting

N

neoney•4/10/24, 1:57 PM

https://developers.cloudflare.com/pages/framework-guides/nextjs/deploy-a-nextjs-site/#not-found

Cloudflare Docs

Full-stack deployment · Cloudflare Pages docs

Deploy a full-stack Next.js site (recommended).

N

neoney•4/10/24, 1:57 PM

documented

N

neoney•4/10/24, 1:59 PM

i definitely recommend using C3 to init the projects, they have the good defaults already

G

Georgi Vatsov•4/10/24, 2:02 PM

Hey! Does anyone know if I can use the Next.JS middleware along with the fetch caching inside the CF workers? I want to cache a page based on some parameters that are not in the URL (like user country by ip, device type and language etc.). How can I do this with pages router and next-on-pages?

Nneoney https://developers.cloudflare.com/pages/framework-guides/nextjs/deploy-a-nextjs-...

A

AA•4/10/24, 2:05 PM

Oh, neat. I feel like I started using next-on-pages before this doc existed, i need to review/read it.

Uulrikstrid I'm creating a form and want to use the fancy `action={myFunction}` pattern that...

T

thipperz•4/10/24, 2:55 PM

I've been using Server Actions extensively in my project, had no issues yet. What do you mean by it doesn't play nice with the export const 'edge' ?

T

thipperz•4/10/24, 2:56 PM

I feel like they're blazing fast combined with d1

Uulrikstrid I'm creating a form and want to use the fancy `action={myFunction}` pattern that...

N

neoney•4/10/24, 2:56 PM

just dont put the edge export

N

neoney•4/10/24, 2:56 PM

it works

N

neoney•4/10/24, 2:56 PM

i think you need to put it in the page.tsx

Nneoney I have two font weights, which sum up to be 600 KiB, so that's a big issue

B

Baptistabomb•4/10/24, 3:05 PM

did u find a solution?

N

neoney•4/10/24, 3:05 PM

upgrade to workers paid

N

neoney•4/10/24, 3:05 PM

limit there is 10mib

B

Baptistabomb•4/10/24, 3:05 PM

arf :/

N

neoney•4/10/24, 3:05 PM

and project will have users as its a migration, so non issue for me

N

neoney•4/10/24, 3:05 PM

good luck though]

N

neoney•4/10/24, 3:05 PM

you can load the fonts dynamically

N

neoney•4/10/24, 3:05 PM

with the fetch

N

neoney•4/10/24, 3:05 PM

from just a url

N

neoney•4/10/24, 3:05 PM

but it will be slower

N

neoney•4/10/24, 3:07 PM

dynamically, as in from an external source

J

Juul•4/10/24, 3:09 PM

Hi all. If I want to set cache settings on

fetch

fetch

in a Next.js server component or middleware. Should I use the options defined by the workerd API as the alternative for

cache: 'no-store'

cache: 'no-store'

cache: 'no-store'

cache: 'no-store' ?

https://developers.cloudflare.com/workers/runtime-apis/request/#the-cf-property-requestinitcfproperties
https://nextjs.org/docs/app/api-reference/functions/fetch#optionscache

Nneoney limit there is 10mib

D

Deo KumarOP•4/10/24, 3:16 PM

10mib or 25?

N

neoney•4/10/24, 3:16 PM

10 i believe

N

neoney•4/10/24, 3:16 PM

for functions

N

neoney•4/10/24, 3:16 PM

25mb is for assets

B

Baptistabomb•4/10/24, 3:17 PM

is there any way to deminify so that I can see what is taking space in the func.js functions?

JJuul Hi all. If I want to set cache settings on `fetch` in a Next.js server component...

J

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

If you want to use Next.js' fetch cache, you should use the Next.js options

BBaptistabomb is there any way to deminify so that I can see what is taking space in the func....

J

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

--disable-worker-minification

--disable-worker-minification

--disable-worker-minification

--disable-worker-minification flag when building

Nneoney and project will have users as its a migration, so non issue for me

D

Deo KumarOP•4/10/24, 3:19 PM

You can use @cf-wasm/og, it uses cache api to cache responses.

import { ImageResponse, GoogleFont } from "@cf-wasm/og/next";

new ImageResponse(<div>Hello</div>, {
  fonts: [new GoogleFont("JetBrains Mono")]
});

import { ImageResponse, GoogleFont } from "@cf-wasm/og/next";

new ImageResponse(<div>Hello</div>, {
  fonts: [new GoogleFont("JetBrains Mono")]
});

import { ImageResponse, GoogleFont } from "@cf-wasm/og/next";

new ImageResponse(<div>Hello</div>, {
  fonts: [new GoogleFont("JetBrains Mono")]
});

import { ImageResponse, GoogleFont } from "@cf-wasm/og/next";

new ImageResponse(<div>Hello</div>, {
  fonts: [new GoogleFont("JetBrains Mono")]
});

JJames `--disable-worker-minification` flag when building

B

Baptistabomb•4/10/24, 3:21 PM

hmm I did `pnpx @cloudflare/next-on-pages --disable-worker-minification``
and it is still not readable :/

JJames If you want to use Next.js' fetch cache, you should use the Next.js options

J

Juul•4/10/24, 3:22 PM

Also on Cloudflare Pages with the Edge runtime? If I do the below it throws

The 'cache' field on 'RequestInitializerDict' is not implemented.

The 'cache' field on 'RequestInitializerDict' is not implemented.

The 'cache' field on 'RequestInitializerDict' is not implemented.

The 'cache' field on 'RequestInitializerDict' is not implemented. when called on the pages deployment.

const response = await fetch(`/example`, {
    cache: 'no-store'
  });

const response = await fetch(`/example`, {
    cache: 'no-store'
  });

const response = await fetch(`/example`, {
    cache: 'no-store'
  });

const response = await fetch(`/example`, {
    cache: 'no-store'
  });

https://github.com/cloudflare/workerd/issues/698

B

Baptistabomb•4/10/24, 3:23 PM

my page is just that and it still takes 87Ko even though WelcomeForm has 'use client'

import WelcomeForm from '@/components/welcome/WelcomeForm'
import { getAccountOfCurrentSession } from '@/lib/api/accounts/queries'

export const runtime = 'edge'

export default async function WelcomePage () {
  const account = await getAccountOfCurrentSession()
  return (
    account && (
      <main className='flex justify-center md:max-h-[80vh] md:min-h-[80vh] overflow-auto overflow-y-scroll scrollbar lg:mt-4'>
        <div className='flex flex-col space-y-2 max-w-[90%] md:max-w-[50%]'>
          <h1 className='my-4 text-2xl font-semibold text-center'>
            Bienvenue! Complétez votre profil avant de commencer
          </h1>
          <WelcomeForm account={account} />
        </div>
      </main>
    )
  )
}

import WelcomeForm from '@/components/welcome/WelcomeForm'
import { getAccountOfCurrentSession } from '@/lib/api/accounts/queries'

export const runtime = 'edge'

export default async function WelcomePage () {
  const account = await getAccountOfCurrentSession()
  return (
    account && (
      <main className='flex justify-center md:max-h-[80vh] md:min-h-[80vh] overflow-auto overflow-y-scroll scrollbar lg:mt-4'>
        <div className='flex flex-col space-y-2 max-w-[90%] md:max-w-[50%]'>
          <h1 className='my-4 text-2xl font-semibold text-center'>
            Bienvenue! Complétez votre profil avant de commencer
          </h1>
          <WelcomeForm account={account} />
        </div>
      </main>
    )
  )
}

import WelcomeForm from '@/components/welcome/WelcomeForm'
import { getAccountOfCurrentSession } from '@/lib/api/accounts/queries'

export const runtime = 'edge'

export default async function WelcomePage () {
  const account = await getAccountOfCurrentSession()
  return (
    account && (
      <main className='flex justify-center md:max-h-[80vh] md:min-h-[80vh] overflow-auto overflow-y-scroll scrollbar lg:mt-4'>
        <div className='flex flex-col space-y-2 max-w-[90%] md:max-w-[50%]'>
          <h1 className='my-4 text-2xl font-semibold text-center'>
            Bienvenue! Complétez votre profil avant de commencer
          </h1>
          <WelcomeForm account={account} />
        </div>
      </main>
    )
  )
}

import WelcomeForm from '@/components/welcome/WelcomeForm'
import { getAccountOfCurrentSession } from '@/lib/api/accounts/queries'

export const runtime = 'edge'

export default async function WelcomePage () {
  const account = await getAccountOfCurrentSession()
  return (
    account && (
      <main className='flex justify-center md:max-h-[80vh] md:min-h-[80vh] overflow-auto overflow-y-scroll scrollbar lg:mt-4'>
        <div className='flex flex-col space-y-2 max-w-[90%] md:max-w-[50%]'>
          <h1 className='my-4 text-2xl font-semibold text-center'>
            Bienvenue! Complétez votre profil avant de commencer
          </h1>
          <WelcomeForm account={account} />
        </div>
      </main>
    )
  )
}

JJuul Also on Cloudflare Pages with the Edge runtime? If I do the below it throws `The...

J

James•4/10/24, 3:23 PM

pages dir or app dir?

Nneoney 25mb is for assets

D

Deo KumarOP•4/10/24, 3:24 PM

next-on-pages

J

Juul•4/10/24, 3:24 PM

App dir

N

neoney•4/10/24, 3:25 PM

Oh then the pricing page is outdated

BBaptistabomb hmm I did `pnpx @cloudflare/next-on-pages --disable-worker-minification`` and i...

J

James•4/10/24, 3:25 PM

it disabled our minification, although next.js + vercel might still be doing their own minification

JJuul App dir

J

James•4/10/24, 3:25 PM

which next.js version?

J

Juul•4/10/24, 3:25 PM

"@cloudflare/next-on-pages": "^1.11.0",

"@cloudflare/next-on-pages": "^1.11.0",

"@cloudflare/next-on-pages": "^1.11.0",

"@cloudflare/next-on-pages": "^1.11.0",

"next": "^14.0.4",

"next": "^14.0.4",

"next": "^14.0.4",

"next": "^14.0.4",

J

James•4/10/24, 3:28 PM

Hmm okay, it's possible something might have changed in Next that we need to update something for

J

Juul•4/10/24, 3:30 PM

It does work locally, but I'm running through the next dev command, so I assume there might be runtime API differences with actual deployments? When deployed to cloudflare anything serverside runs with workerd, right?

J

Juul•4/10/24, 3:30 PM

with

export const runtime = 'edge'

export const runtime = 'edge'

export const runtime = 'edge'

export const runtime = 'edge'

B

Baptistabomb•4/10/24, 3:32 PM

why are the client components embedded inside the func.js in the functions folder ?

N

neoney•4/10/24, 3:54 PM

theyre still SSR-ed

B

Baptistabomb•4/10/24, 4:00 PM

Okay, what can I do to prevent them from being bundled in the functions? "use client" at the parent component?

I am not sure but I think you explicitly need to create a not-found page and export runtime constant

Similar Threads

Similar Threads

Similar Threads