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

N

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

actually thats not the issue, nvm

N

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

│ __next-on-pages-dist__/functions/checkout/[id].func.js                             │ esm           │ 1043.90 KiB │

│ __next-on-pages-dist__/functions/checkout/[id].func.js                             │ esm           │ 1043.90 KiB │

│ __next-on-pages-dist__/functions/checkout/[id].func.js                             │ esm           │ 1043.90 KiB │

│ __next-on-pages-dist__/functions/checkout/[id].func.js                             │ esm           │ 1043.90 KiB │

N

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

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

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'

?

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

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

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

Similar Threads