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

N

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

documented

N

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

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

just dont put the edge export

N

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

it works

N

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

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

upgrade to workers paid

N

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

limit there is 10mib

B

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

arf :/

N

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

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

N

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

good luck though]

N

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

you can load the fonts dynamically

N

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

with the fetch

N

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

from just a url

N

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

but it will be slower

N

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

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

10 i believe

N

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

for functions

N

neoneyOP•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 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.

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

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

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

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

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

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

N

neoneyOP•4/10/24, 5:21 PM

Im guessing it needs some kind of workers-sdk issue

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

Similar Threads