When deploying a NextJs site to Cloudflare Pages, are the pre-rendered pages still served via the wo

Nnaourass When deploying a NextJs site to Cloudflare Pages, are the pre-rendered pages sti...

H

They are served by the Function. Next.js internally expects to handle every request for a page, unless you make the entire project static

HHello, I’m Allie!They are served by the Function. Next.js internally expects to handle every requ...

N

naourassOP•4/18/24, 9:26 AM

Thanks for the clarification

D

Deo Kumar•4/18/24, 1:13 PM

It will be very useful if next-on-pages logs the final functions size because most of the deployments are failing due to scripts size limits.

M

makisuo•4/18/24, 5:26 PM

00:08:56.974    Detected the following tools from environment: bun@1.1.4, nodejs@18.17.1, npm@9.6.7
00:08:56.975    Installing bun 1.1.4
00:08:57.120    Downloading Bun v1.1.4...
00:08:58.307    Archive:  /tmp/asdf-bun.N6Ve/bun.zip
00:08:59.050      inflating: /opt/buildhome/.asdf/downloads/bun/1.1.4/bun  
00:08:59.115    Installing Bun v1.1.4...
00:08:59.216    Bun v1.1.4 is installed successfully!
00:08:59.714    Installing project dependencies: npm install --progress=false
00:09:06.876    npm ERR! code EUNSUPPORTEDPROTOCOL

00:08:56.974    Detected the following tools from environment: bun@1.1.4, nodejs@18.17.1, npm@9.6.7
00:08:56.975    Installing bun 1.1.4
00:08:57.120    Downloading Bun v1.1.4...
00:08:58.307    Archive:  /tmp/asdf-bun.N6Ve/bun.zip
00:08:59.050      inflating: /opt/buildhome/.asdf/downloads/bun/1.1.4/bun  
00:08:59.115    Installing Bun v1.1.4...
00:08:59.216    Bun v1.1.4 is installed successfully!
00:08:59.714    Installing project dependencies: npm install --progress=false
00:09:06.876    npm ERR! code EUNSUPPORTEDPROTOCOL

00:08:56.974    Detected the following tools from environment: bun@1.1.4, nodejs@18.17.1, npm@9.6.7
00:08:56.975    Installing bun 1.1.4
00:08:57.120    Downloading Bun v1.1.4...
00:08:58.307    Archive:  /tmp/asdf-bun.N6Ve/bun.zip
00:08:59.050      inflating: /opt/buildhome/.asdf/downloads/bun/1.1.4/bun  
00:08:59.115    Installing Bun v1.1.4...
00:08:59.216    Bun v1.1.4 is installed successfully!
00:08:59.714    Installing project dependencies: npm install --progress=false
00:09:06.876    npm ERR! code EUNSUPPORTEDPROTOCOL

00:08:56.974    Detected the following tools from environment: bun@1.1.4, nodejs@18.17.1, npm@9.6.7
00:08:56.975    Installing bun 1.1.4
00:08:57.120    Downloading Bun v1.1.4...
00:08:58.307    Archive:  /tmp/asdf-bun.N6Ve/bun.zip
00:08:59.050      inflating: /opt/buildhome/.asdf/downloads/bun/1.1.4/bun  
00:08:59.115    Installing Bun v1.1.4...
00:08:59.216    Bun v1.1.4 is installed successfully!
00:08:59.714    Installing project dependencies: npm install --progress=false
00:09:06.876    npm ERR! code EUNSUPPORTEDPROTOCOL

For some reason it's installing bun but then running npm install for me?
If I run it locally it uses bun as expected

F

FelDev•4/18/24, 6:44 PM

About Next.js' unstable_cache
Is it supposed to work out of the box?

My tests indicate that the cache works, but only as long as a given worker lives.
eg;
request A -> cache miss, puts the data in cache
request B -> cache hit, because it was handled by the same worker
request C -> cache miss, because it was handled by a different worker

I'm surprised to find nothing about unstable_cache in this Discord!
Besides this package, released 5 days ago
https://github.com/hansottowirtz/cloudflare-workers-cache

N

neoney•4/18/24, 9:53 PM

my page is randomly getting a 1101

N

neoney•4/18/24, 9:53 PM

...

N

neoney•4/18/24, 9:54 PM

"message": "The script will never generate a response.",

N

neoney•4/18/24, 9:54 PM

on GET

N

neoney•4/18/24, 9:55 PM

from what i see so far all of these are for users on Edge?

N

neoney•4/18/24, 9:57 PM

might be random

N

neoney•4/18/24, 10:09 PM

ehh started happening again

N

neoney•4/18/24, 10:09 PM

chrome this time

N

neoney•4/18/24, 10:13 PM

doesnt seem regional either

N

neoney•4/18/24, 10:23 PM

rare but happens

E

Erik•4/19/24, 1:18 PM

The documentation to get started with durable object it states i need to add binding in settings

E

Erik•4/19/24, 1:19 PM

except in the settings it refers me back to the documentation

E

Erik•4/19/24, 2:18 PM

Ok i found out you need te create a sepperate worker project

E

Erik•4/19/24, 2:18 PM

THEN you can bind it

G

Georgi Vatsov•4/19/24, 2:23 PM

Hey! I am using a CF worker as a caching layer to my NOP project.
So I am doing a

fetch

fetch

with a custom cache key from my Worker to my NOP. The custom cache key formula is:

https://${url.hostname}/${language}/${country}/${deviceType}/${url.pathname}${url.search}

https://${url.hostname}/${language}/${country}/${deviceType}/${url.pathname}${url.search}

https://${url.hostname}/${language}/${country}/${deviceType}/${url.pathname}${url.search}

https://${url.hostname}/${language}/${country}/${deviceType}/${url.pathname}${url.search}
In my NOP pages I use SSR and I have

fetch

fetch

es to my API that would retrieve some data from the db. I also have Cache Rules for my API endpoints, so they're cached in CF after the first request.
My problem is that whenever I request

some-url?test=1

some-url?test=1

some-url?test=1

some-url?test=1 (

test

test

test

test in this case is just a random variable here, which does not affect the API request or anything other than the custom cache key), I would get it for ~500 ms the first time and when I do a request for

some-url?test=2

some-url?test=2

some-url?test=2

some-url?test=2 I would get it for ~500 ms again. If I refresh any of those I would get it for ~20 ms. I would expect that the

test=2

test=2

test=2

test=2 will be already very fast after the

test=1

test=1

test=1

test=1 was already executed, because the

test

test

test

test query string parameter is not changing anything for the API request.
Any ideas? Highly appreciated.

P

Pat Branchaud•4/19/24, 7:03 PM

Hey, in a Next.js app running on Cloudflare Workers, what are the trade-offs between accessing a KV namespace directly using getRequestContext().env.MY_KV versus accessing it through a fetch request to the Cloudflare API, considering mostly performance? This api : https://developers.cloudflare.com/api/operations/workers-kv-namespace-read-the-metadata-for-a-key

Cloudflare API Documentation

Interact with Cloudflare's products and services via the Cloudflare API

PPat Branchaud Hey, in a Next.js app running on Cloudflare Workers, what are the trade-offs bet...

H

Hello, I’m Allie!•4/19/24, 7:10 PM

There is also a rate limit on the API(I believe it is 1200 rpm)

F

FelDev•4/19/24, 7:16 PM

good point https://developers.cloudflare.com/fundamentals/api/reference/limits/

The global rate limit for the Cloudflare API is 1200 requests per five minutes per user, and applies cumulatively regardless of whether the request is made via the dashboard, API key, or API token.
[...]
Enterprise customers can also contact Cloudflare Support to raise the limit to a higher value.

H

Hello, I’m Allie!•4/19/24, 7:17 PM

Oh, five minutes, nvm

PPat Branchaud Hey, in a Next.js app running on Cloudflare Workers, what are the trade-offs bet...

C

Chaika•4/19/24, 8:25 PM

considering mostly performance

If you're considering mostly performance, that api endpoint always goes back to core so it'll be way slower across the board. The KV binding uses cache in the local dc, and then goes to one of the central stores

K

karim•4/20/24, 2:08 AM

my CPU time on my next.js site hosted on cf pages seems high, is this normal? The functions aren't anything complex just the ones that run when initially loading the page. If your curious I had a massive traffic spike on the 15th

M

Matt•4/20/24, 3:32 AM

anyone have server actions working with a deployed next app? not having any luck

I'm getting a 405

M

Matt•4/20/24, 3:34 AM

looks like https://github.com/cloudflare/next-on-pages/issues/679

GitHub

[🐛 Bug]: Calling server actions on a static or SSR pages returns 40...

next-on-pages environment related information System: Platform: darwin Arch: arm64 Version: Darwin Kernel Version 23.2.0: Wed Nov 15 21:55:06 PST 2023; root:xnu-10002.61.3~2/RELEASE_ARM64_T6020 CPU...

M

Matt•4/20/24, 3:34 AM

however when I add

export const runtime = 'edge';

export const runtime = 'edge';

export const runtime = 'edge';

export const runtime = 'edge';

I then get a 404

M

Matt•4/20/24, 3:37 AM

oh very strange... I had NODE_ENV = production, locally, so i could build using a .env for production before deploying to next ... removing that has it back to a 200 and working but I still need to provide

export const runtime = "edge";

export const runtime = "edge";

export const runtime = "edge";

export const runtime = "edge";

on my static page unfortunately

MMatt oh very strange... I had NODE_ENV = production, locally, so i could build using ...

N

neoney•4/20/24, 1:16 PM

yes, that is required

Kkarim my CPU time on my next.js site hosted on cf pages seems high, is this normal? Th...

N

Nob•4/21/24, 12:20 AM

seem like a lot

N

Nob•4/21/24, 12:22 AM

I have about 30-40ms

N

neoney•4/21/24, 12:37 AM

how would one handle uploading files to R2 from a next.js server action?

Nneoney how would one handle uploading files to R2 from a next.js server action?

T

thanhle•4/21/24, 1:13 AM

i prefer uploading from client after you get the presignedurl

M

Mirage•4/21/24, 1:14 AM

not sure what's happening but I'm deploying my site using next-on-pages on CF, it gives me a preview deployment url, but it actually fails to deploy when I check on CF's end

O

osa•4/21/24, 8:33 AM

I'm trying to get cache headers working for images loaded with custom loader which utilizes the default Cloudflare Image Optimization implementation. These files are served from the public folder (

public/images

public/images

public/images

public/images) which by default gets no cache (

public, max-age=0, must-revalidate

public, max-age=0, must-revalidate

public, max-age=0, must-revalidate

public, max-age=0, must-revalidate) and so the optimizer serves them with this header as well.

I've tried to add the following config settings:

{
  async headers() {
    return [
      {
        source: '/cdn-cgi/image/(.*)', // does not work
        headers: [
          {
            key: 'cache-control',
            value: 'public, max-age=14400',
          },
        ],
      },
      {
        source: '/images/(.*)', // does not work
        headers: [
          {
            key: 'cache-control',
            value: 'public, max-age=14400',
          },
        ],
      },
    ];
  },
  images: {
    minimumCacheTTL: 3600, // this does nothing
    loader: 'custom',
    loaderFile: './imageLoader.js',
  },
}

{
  async headers() {
    return [
      {
        source: '/cdn-cgi/image/(.*)', // does not work
        headers: [
          {
            key: 'cache-control',
            value: 'public, max-age=14400',
          },
        ],
      },
      {
        source: '/images/(.*)', // does not work
        headers: [
          {
            key: 'cache-control',
            value: 'public, max-age=14400',
          },
        ],
      },
    ];
  },
  images: {
    minimumCacheTTL: 3600, // this does nothing
    loader: 'custom',
    loaderFile: './imageLoader.js',
  },
}

{
  async headers() {
    return [
      {
        source: '/cdn-cgi/image/(.*)', // does not work
        headers: [
          {
            key: 'cache-control',
            value: 'public, max-age=14400',
          },
        ],
      },
      {
        source: '/images/(.*)', // does not work
        headers: [
          {
            key: 'cache-control',
            value: 'public, max-age=14400',
          },
        ],
      },
    ];
  },
  images: {
    minimumCacheTTL: 3600, // this does nothing
    loader: 'custom',
    loaderFile: './imageLoader.js',
  },
}

{
  async headers() {
    return [
      {
        source: '/cdn-cgi/image/(.*)', // does not work
        headers: [
          {
            key: 'cache-control',
            value: 'public, max-age=14400',
          },
        ],
      },
      {
        source: '/images/(.*)', // does not work
        headers: [
          {
            key: 'cache-control',
            value: 'public, max-age=14400',
          },
        ],
      },
    ];
  },
  images: {
    minimumCacheTTL: 3600, // this does nothing
    loader: 'custom',
    loaderFile: './imageLoader.js',
  },
}

I also tried adding them to

_headers

_headers

_headers

_headers file in the root of the project but they don't seem to get included in the final build.

Only way I've been able to get cache headers working for these files is by modifying

./.vercel/output/static/_headers

./.vercel/output/static/_headers

./.vercel/output/static/_headers

./.vercel/output/static/_headers after the build by adding this to the end of the generated file:

/images/*
  cache-control: public,max-age=3600

/images/*
  cache-control: public,max-age=3600

/images/*
  cache-control: public,max-age=3600

/images/*
  cache-control: public,max-age=3600

Am I missing something or is this the only way to get cache headers working for these images?

T

Tommerty•4/21/24, 10:55 AM

Hey there

I currently have a website on Vercel and the main reason we chose Vercel was due to how easy it was to set up a multi tenant system (we allow our "Pro" users to attach a domain to their profile and it's as simple as letting them point either a root domain to the Vercel IP, or a CNAME to their subdomain (username.website.com)).

I'd like for us to move back to Cloudflare tbh, as I have never been a big fan of Vercels pricing model (even before the recent changes), but I'm stuck at a loss of understanding how we could set something like this up on Cloudflare, as it's quite confusing regarding the "edge certs/client certs/custom hostnames/origin server etc.

Is there any documentation/posts/resources to help point me in the right direction? Right now the routing is just going through the middleware.ts and Vercel pretty much take care of the rest.

TIA!

N

neoney•4/21/24, 11:55 AM

I believe all you need is a CNAME pointed to your pages subdomain and adding the domain in the project's settings

N

neoney•4/21/24, 11:55 AM

You can add it using the API too

N

neoney•4/21/24, 11:55 AM

There's a limit of 500 I believe, and no wildcard support yet

N

neoney•4/21/24, 11:55 AM

You could get around that using a worker to proxy it

T

Tommerty•4/21/24, 4:55 PM

Thanks, will investigate! I assumed I'd need to sort out the whole cloudflare for saas and all this complicated stuff

B

bun•4/21/24, 5:16 PM

i have connection timeouts with no logs

B

bun•4/21/24, 5:23 PM

$ next dev --turbo
/Users/user/app/node_modules/wrangler/wrangler-dist/cli.js:29573
            throw a;
            ^

TypeError: fetch failed
    at fetch (/Users/user/app/node_modules/wrangler/wrangler-dist/cli.js:17033:19)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async getRegisteredWorkers (/Users/user/app/node_modules/wrangler/wrangler-dist/cli.js:127790:22)
    at async getBoundRegisteredWorkers (/Users/user/app/node_modules/wrangler/wrangler-dist/cli.js:127810:29)
    at async getMiniflareOptionsFromConfig (/Users/user/app/node_modules/wrangler/wrangler-dist/cli.js:173117:29)
    at async getPlatformProxy (/Users/user/app/node_modules/wrangler/wrangler-dist/cli.js:173089:28)
    at async setupDevPlatform (/Users/user/app/node_modules/@cloudflare/next-on-pages/dist/next-dev/index.cjs:183:23)
    at async file:///Users/user/app/apps/web/next.config.mjs:4:3 {

$ next dev --turbo
/Users/user/app/node_modules/wrangler/wrangler-dist/cli.js:29573
            throw a;
            ^

TypeError: fetch failed
    at fetch (/Users/user/app/node_modules/wrangler/wrangler-dist/cli.js:17033:19)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async getRegisteredWorkers (/Users/user/app/node_modules/wrangler/wrangler-dist/cli.js:127790:22)
    at async getBoundRegisteredWorkers (/Users/user/app/node_modules/wrangler/wrangler-dist/cli.js:127810:29)
    at async getMiniflareOptionsFromConfig (/Users/user/app/node_modules/wrangler/wrangler-dist/cli.js:173117:29)
    at async getPlatformProxy (/Users/user/app/node_modules/wrangler/wrangler-dist/cli.js:173089:28)
    at async setupDevPlatform (/Users/user/app/node_modules/@cloudflare/next-on-pages/dist/next-dev/index.cjs:183:23)
    at async file:///Users/user/app/apps/web/next.config.mjs:4:3 {

$ next dev --turbo
/Users/user/app/node_modules/wrangler/wrangler-dist/cli.js:29573
            throw a;
            ^

TypeError: fetch failed
    at fetch (/Users/user/app/node_modules/wrangler/wrangler-dist/cli.js:17033:19)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async getRegisteredWorkers (/Users/user/app/node_modules/wrangler/wrangler-dist/cli.js:127790:22)
    at async getBoundRegisteredWorkers (/Users/user/app/node_modules/wrangler/wrangler-dist/cli.js:127810:29)
    at async getMiniflareOptionsFromConfig (/Users/user/app/node_modules/wrangler/wrangler-dist/cli.js:173117:29)
    at async getPlatformProxy (/Users/user/app/node_modules/wrangler/wrangler-dist/cli.js:173089:28)
    at async setupDevPlatform (/Users/user/app/node_modules/@cloudflare/next-on-pages/dist/next-dev/index.cjs:183:23)
    at async file:///Users/user/app/apps/web/next.config.mjs:4:3 {

$ next dev --turbo
/Users/user/app/node_modules/wrangler/wrangler-dist/cli.js:29573
            throw a;
            ^

TypeError: fetch failed
    at fetch (/Users/user/app/node_modules/wrangler/wrangler-dist/cli.js:17033:19)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async getRegisteredWorkers (/Users/user/app/node_modules/wrangler/wrangler-dist/cli.js:127790:22)
    at async getBoundRegisteredWorkers (/Users/user/app/node_modules/wrangler/wrangler-dist/cli.js:127810:29)
    at async getMiniflareOptionsFromConfig (/Users/user/app/node_modules/wrangler/wrangler-dist/cli.js:173117:29)
    at async getPlatformProxy (/Users/user/app/node_modules/wrangler/wrangler-dist/cli.js:173089:28)
    at async setupDevPlatform (/Users/user/app/node_modules/@cloudflare/next-on-pages/dist/next-dev/index.cjs:183:23)
    at async file:///Users/user/app/apps/web/next.config.mjs:4:3 {

B

bun•4/21/24, 5:23 PM

on next 14.2

@

@che•4/21/24, 9:15 PM

Does anyone here know if No Access will be supported with next-on-pages? Recommend https://developers.cloudflare.com/workers/runtime-apis/bindings/rate-limit/ is updated to indicated rate limiting isn't currently working with pages. It works locally for me but fails on deploy, have been informed via ^rate limiting beta channel it's due to the way .toml is handled and there is no rate limiting setting within page settings

Bbun ``` $ next dev --turbo /Users/user/app/node_modules/wrangler/wrangler-dist/cli.j...

M

makisuo•4/21/24, 10:51 PM

having this issue too randomly after hot reloading.

F

FelDev•4/22/24, 1:59 PM

Is Vercel dropping support for Edge rendering going to affect next-on-pages?
https://twitter.com/leeerob/status/1780705942734331983

Lee Robinson (@leeerob) on X

So, @vercel reverted all edge rendering back to Node.js

Wanted to correct the record here as it's something I've advocated for in the past, and share what I've learned since then.

Also, the "edge" naming has been a bit confusing, so let's clear that up here as well.

What is…

Twitter

•

4/17/24, 9:12 PM

FFelDev Is Vercel dropping support for Edge rendering going to affect next-on-pages? htt...

I

Isaac McFadyen•4/22/24, 3:24 PM

So just keep in mind that this is for vercel.com, not all Vercel sites (which still can and do use edge rendering).

When deploying a NextJs site to Cloudflare Pages, are the pre-rendered pages still served via the wo

Similar Threads

Similar Threads

Similar Threads