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

AAOP•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 Kumar•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

flag when building

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

D

Deo Kumar•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.

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 Kumar•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",

"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'

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?

B

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

looks like it does the trick, I will reenable them as server components once I get users to pay for the workers plan for 10Mb

Nneoney in the end 1. service binding doesnt work in next dev 2. mtls cert binding doesn...

T

thipperz•4/10/24, 5:20 PM

I wonder if you have any news on this? I'm on a very similar situation trying to use RPC locally with next dev

In my case when I run

wrangler pages dev

wrangler pages dev

I can indeed execute rpc method but it also won't work if the worker is running with

wrangler dev --remote

wrangler dev --remote

Using wrangler dev without the remote flag means I can't interact with Vectorize or production R2 buckets..

N

neoney•4/10/24, 5:20 PM

I don't have any news as I currently don't need to have it working

yes. that was the fix, pretty interesting

Similar Threads