how do I make this smaller...

Nneoney how do I make this smaller...

N

Nob•4/9/24, 9:12 PM

You can't

N

Nob•4/9/24, 9:12 PM

you buy the worker paid plan

N

neoneyOP•4/9/24, 9:12 PM

ah...

N

Nob•4/9/24, 9:12 PM

That's what I did

RRafael França Does anyone know how to fix this? https://github.com/cloudflare/next-on-pages/i...

B

bun•4/10/24, 12:26 AM

that's very odd because you are indeed not supposed to use

<Html />

<Html />

<Html />

<Html /> outside of

pages/_document

pages/_document

pages/_document

pages/_document and both deployment methodologies use

next build

next build

, so it's definitely weird that it works locally?

D

Deo Kumar•4/10/24, 1:49 AM

Will

env.ASSETS

env.ASSETS

env.ASSETS

env.ASSETS be available in local (using

getRequestContext()

getRequestContext()

getRequestContext()

getRequestContext()) and production when using next-on-pages?

AAA complains about a _not-found file even if you dont have one.. interesting

D

Deo Kumar•4/10/24, 1:51 AM

I am not sure but I think you explicitly need to create a not-found page and export runtime constant to make it edge compatible.

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

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

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