Yeah if you use the Link component it will automatically prefetch the RSC payload for every link in

JJames Yeah if you use the Link component it will automatically prefetch the RSC payloa...

B

Befus•1/20/24, 12:15 PM

Thank you we are debugging our performance of the site, do you think this could have to do with it if there are a lot of these caching requests? On one particular page this goes op to 4000 requests

J

JamesOP•1/20/24, 12:16 PM

Wouldn't surprise me if the prefetching is killing your performance, because depending on what's on your page, it might have to do a serious amount of work and endless requests

J

JamesOP•1/20/24, 12:17 PM

If you are automatically prefetching more than 10 pages on load, that's too many IMO

B

Befus•1/20/24, 12:17 PM

I'm going to test it out and let you know

B

Befus•1/20/24, 12:27 PM

Well that drasticly improved holy

B

Befus•1/20/24, 12:27 PM

Before optimisation it was around 5 seconds

J

JamesOP•1/20/24, 1:16 PM

Beautiful

N

nico•1/21/24, 12:42 AM

I am currently migrating my Next.js app to Cloudflare Pages. I have used SendGrids Web API to send emails (e.g. for my contact forms). That does not work after switching to the Edge runtime because SendGrid seems to use Axios to send their emails (as i found in my error message and analyzing the sub-dependencies). What is the go-to solution for such cases? Do I need to use SMTP relays or is there an easier solution?

Current error (after submitting a valid form to my edge runtime configured api endpoint):

[AxiosError: There is no suitable adapter to dispatch the request since :
- adapter xhr is not supported by the environment
- adapter http is not available in the build] {
  message: 'There is no suitable adapter to dispatch the request since :\n- adapter xhr is not supported by the environment\n- adapter http is not available in the build',
  name: 'AxiosError',
  code: 'ERR_NOT_SUPPORT'
}

[AxiosError: There is no suitable adapter to dispatch the request since :
- adapter xhr is not supported by the environment
- adapter http is not available in the build] {
  message: 'There is no suitable adapter to dispatch the request since :\n- adapter xhr is not supported by the environment\n- adapter http is not available in the build',
  name: 'AxiosError',
  code: 'ERR_NOT_SUPPORT'
}

[AxiosError: There is no suitable adapter to dispatch the request since :
- adapter xhr is not supported by the environment
- adapter http is not available in the build] {
  message: 'There is no suitable adapter to dispatch the request since :\n- adapter xhr is not supported by the environment\n- adapter http is not available in the build',
  name: 'AxiosError',
  code: 'ERR_NOT_SUPPORT'
}

[AxiosError: There is no suitable adapter to dispatch the request since :
- adapter xhr is not supported by the environment
- adapter http is not available in the build] {
  message: 'There is no suitable adapter to dispatch the request since :\n- adapter xhr is not supported by the environment\n- adapter http is not available in the build',
  name: 'AxiosError',
  code: 'ERR_NOT_SUPPORT'
}

Nnico I am currently migrating my Next.js app to Cloudflare Pages. I have used SendGri...

D

Donnager•1/21/24, 1:14 AM

not sure if you've checked out resend, they have an edge compatible lib,

for what is considered best practice, i think if you want to stay on cloudflare stack maybe using mail channels since they have a partnership with CF but that involves adding a worker if i understand it correctly (which i may not)

O

Oreki•1/21/24, 8:22 AM

Hey i am using contentlayer and with nextjs and for this specific dynamic route, next-on-pages is asking me to make it run on edge but i get

⨯ Internal error: TypeError: Cannot read properties of undefined (reading '')
[TypeError: Cannot read properties of undefined (reading '')]
 ⨯ [TypeError: Cannot read properties of undefined (reading '')]
 ⨯ [TypeError: Cannot read properties of null (reading 'default')]
[TypeError: Cannot read properties of undefined (reading '')]
 ⨯ [TypeError: Cannot read properties of undefined (reading '')]
 ⨯ [TypeError: Cannot read properties of null (reading 'default')]

⨯ Internal error: TypeError: Cannot read properties of undefined (reading '')
[TypeError: Cannot read properties of undefined (reading '')]
 ⨯ [TypeError: Cannot read properties of undefined (reading '')]
 ⨯ [TypeError: Cannot read properties of null (reading 'default')]
[TypeError: Cannot read properties of undefined (reading '')]
 ⨯ [TypeError: Cannot read properties of undefined (reading '')]
 ⨯ [TypeError: Cannot read properties of null (reading 'default')]

⨯ Internal error: TypeError: Cannot read properties of undefined (reading '')
[TypeError: Cannot read properties of undefined (reading '')]
 ⨯ [TypeError: Cannot read properties of undefined (reading '')]
 ⨯ [TypeError: Cannot read properties of null (reading 'default')]
[TypeError: Cannot read properties of undefined (reading '')]
 ⨯ [TypeError: Cannot read properties of undefined (reading '')]
 ⨯ [TypeError: Cannot read properties of null (reading 'default')]

⨯ Internal error: TypeError: Cannot read properties of undefined (reading '')
[TypeError: Cannot read properties of undefined (reading '')]
 ⨯ [TypeError: Cannot read properties of undefined (reading '')]
 ⨯ [TypeError: Cannot read properties of null (reading 'default')]
[TypeError: Cannot read properties of undefined (reading '')]
 ⨯ [TypeError: Cannot read properties of undefined (reading '')]
 ⨯ [TypeError: Cannot read properties of null (reading 'default')]

if i use the default runtime locally, nothing goes wrong

O

Oreki•1/21/24, 8:23 AM

is there any way i can bypass the runtime check? this dynamic route has a generate static params and will always only generate 3 different endpoints

OOreki is there any way i can bypass the runtime check? this dynamic route has a genera...

J

JamesOP•1/21/24, 10:11 AM

For dynamic route SSG you need to tell Next.js to only generate the routes provided.

See how in https://github.com/cloudflare/next-on-pages/blob/main/packages%2Fnext-on-pages%2Fdocs%2Fgotchas.md

3

39dylan•1/24/24, 3:47 PM

Just wondering for edge runtime if we have dynamic routes (

/blog/[slug]

/blog/[slug]

/blog/[slug]

/blog/[slug]) is it possible say to turn a certain page into static e.g.

/blog/1

/blog/1

/blog/1

/blog/1 would it still count towards a function call? According to https://developers.cloudflare.com/pages/configuration/serving-pages/#route-matching "If an HTML file is found with a matching path to the current route requested, Pages will serve it. Pages will also redirect HTML pages to their extension-less counterparts: for instance, /contact.html will be redirected to /contact, and /about/index.html will be redirected to /about/."

Does this apply to static sites only or everything? My reason for doing this way is I have more than 20,000 pages (I'm forced to use edge runtime instead of static export) I plan to make the popular pages static so in theory it will reduce calling a worker functions. Would I have to also include these pages in

routes.json

routes.json

routes.json

routes.json?

339dylan Just wondering for edge runtime if we have dynamic routes (`/blog/[slug]`) is it...

K

kev-ac•1/24/24, 4:37 PM

As everything except

/_next/static/*

/_next/static/*

/_next/static/*

/_next/static/* invokes the functions script even static pages in a next.js project are billable requests afaik. You can see this rule in a single deployment under functions (at the bottom). Provided you use next-on-pages.

A

alrightsure•1/24/24, 7:40 PM

Anyone get D1 working with local development? I've tried every blog post and looked through here and can't seem to figure it out. I would be happy with developing against the remote DB or local DB. Every time I'm in dev mode it seems to be connecting to an empty Sqlite DB that doesn't have any tables in it based on the errors. I've tried putting my remote DB name/ID in the bindings or a local one and i get the same results.

setupDevBindings({
      persist: true,
      bindings: {
        DB: {
          type: "d1",
          id: "local-test-db",
          databaseName: "coaching",
        }
      }
    });

setupDevBindings({
      persist: true,
      bindings: {
        DB: {
          type: "d1",
          id: "local-test-db",
          databaseName: "coaching",
        }
      }
    });

setupDevBindings({
      persist: true,
      bindings: {
        DB: {
          type: "d1",
          id: "local-test-db",
          databaseName: "coaching",
        }
      }
    });

setupDevBindings({
      persist: true,
      bindings: {
        DB: {
          type: "d1",
          id: "local-test-db",
          databaseName: "coaching",
        }
      }
    });

A

alrightsure•1/24/24, 7:40 PM

(it works fine when deployed)

339dylan Just wondering for edge runtime if we have dynamic routes (`/blog/[slug]`) is it...

J

JamesOP•1/24/24, 9:48 PM

They will still invoke the worker as Kev said, unless they're in _routes.json. But excluding routes (instead of assets) from invoking the worker is generally not a good idea as non-static exports expect to be able to through a series of phases and rules for routing that Vercel defines for us.

There are still benefits to prerendering routes though, as it would reduce your final worker size, not need to spend cpu time to render the page, not need to make fetch calls during a render, and so on. So there are benefits still.

W

wesbos•1/26/24, 6:37 PM

Hey Folks- im trying to use KV/D1 inside a Server component, is this possible or only inside an API route? I can't find any examples online

I've got this in my next.config.js, but process.env.TESTKV is always undefined

if (process.env.NODE_ENV === 'development') {
  import('@cloudflare/next-on-pages/next-dev').then(({ setupDevBindings }) => {
      setupDevBindings({
        bindings: {
          // Add here the Cloudflare Bindings you want to have available during local development,
          // for more details on Bindings see: https://developers.cloudflare.com/pages/functions/bindings/)
          //
          // KV Example:
          TESTKV: {
            type: "kv",
            id: "TESTKV",
          },
        },
      });
  })
}

if (process.env.NODE_ENV === 'development') {
  import('@cloudflare/next-on-pages/next-dev').then(({ setupDevBindings }) => {
      setupDevBindings({
        bindings: {
          // Add here the Cloudflare Bindings you want to have available during local development,
          // for more details on Bindings see: https://developers.cloudflare.com/pages/functions/bindings/)
          //
          // KV Example:
          TESTKV: {
            type: "kv",
            id: "TESTKV",
          },
        },
      });
  })
}

if (process.env.NODE_ENV === 'development') {
  import('@cloudflare/next-on-pages/next-dev').then(({ setupDevBindings }) => {
      setupDevBindings({
        bindings: {
          // Add here the Cloudflare Bindings you want to have available during local development,
          // for more details on Bindings see: https://developers.cloudflare.com/pages/functions/bindings/)
          //
          // KV Example:
          TESTKV: {
            type: "kv",
            id: "TESTKV",
          },
        },
      });
  })
}

if (process.env.NODE_ENV === 'development') {
  import('@cloudflare/next-on-pages/next-dev').then(({ setupDevBindings }) => {
      setupDevBindings({
        bindings: {
          // Add here the Cloudflare Bindings you want to have available during local development,
          // for more details on Bindings see: https://developers.cloudflare.com/pages/functions/bindings/)
          //
          // KV Example:
          TESTKV: {
            type: "kv",
            id: "TESTKV",
          },
        },
      });
  })
}

W

wesbos•1/26/24, 6:38 PM

Another question - is the wrangler.toml file not needed with next-on-pages?

Wwesbos Hey Folks- im trying to use KV/D1 inside a Server component, is this possible or...

D

Donnager•1/26/24, 7:35 PM

im a n00b so don't quote me, but you should absolutely be able to access KV/D1 in a server component,

not sure why your setup is undefined, but i think you need to create a KV from local wrangler as well? could be totally wrong and/or maybe you already did this

in terms of

wrangler.toml

wrangler.toml

i believe the maintainer has a PR for that https://github.com/cloudflare/next-on-pages/pull/648 that will allow it to to be used seamlessly, there is an earlier chat where he describes it in this channel,

anyways others who are more knowledgable may be able to help more if you haven't already figured it out

GitHub

use `getBindingsProxy` by dario-piotrowicz · Pull Request #648 · cl...

Example/Demo app showing the usage of this new implementation: https://github.com/dario-piotrowicz/next-on-pages-next-dev-get-bindings-proxy-test-demo

fixes #623
fixes #634 (by shifting the issue ...

DDonnager im a n00b so don't quote me, but you should absolutely be able to access KV/D1 i...

W

wesbos•1/26/24, 7:38 PM

thanks - maybe that is is my issue - I dont have the local one created. Is there any way to connect to the remote one while working locally?

Wwesbos thanks - maybe that is is my issue - I dont have the local one created. Is there...

D

Donnager•1/26/24, 7:48 PM

using just

next dev

next dev

not that i know of but may be possible, im a huge donkey so hope im not leading you down the wrong direction, even now im wondering if i actually did create the KV in wrangler, or if it didn't just automatically do that,

you probably already saw this but the internal github doc:

https://github.com/cloudflare/next-on-pages/blob/main/internal-packages/next-dev/README.md

https://github.com/cloudflare/next-on-pages/blob/main/internal-packages/next-dev/README.md

that says it generates from miniflare, so i feel like you may not need it locally, but can't remember how i set it up last time hehe

S

sathoro•1/27/24, 6:31 AM

I'm having some trouble with exceptions getting logged in Sentry and I think it is related to how Cloudflare Pages is bundling the application, but I'm not certain. basically if an error occurs locally, then it gets logged correctly as an exception to Sentry. but when deployed on Cloudflare Pages, it is getting logged as a console error message and not an exception.

we are still using NextJS 13 and the old version of next-on-pages

I tried adding a custom _error.js file like here but then it gave an error when building and said I need to specify that as an edge route, which I don't think is what I'm wanting to do?

J

JamesOP•1/27/24, 10:27 AM

getInitialProps can probably run on the server i imagine, so it will try to generate an node.js function I would assume. It's also a legacy API so your mileage may vary.

I don't know how sentry works, but the error it's logging could be the one that we catch and then log via console.error after running an edge function, but I'm not sure how sentry works so unsure if that's what's intercepting

D

drcolonel•1/27/24, 12:56 PM

Hello, I'm new to cloudflare and want to contact with someone using cloudflare worker with next js application can anyone help me?! ~ty.

J

JamesOP•1/27/24, 1:06 PM

Can you write your question please?

JJames getInitialProps can probably run on the server i imagine, so it will try to gene...

S

sathoro•1/27/24, 1:52 PM

the exceptions that should be getting logged are happening in the browser, but they seem to get swallowed up

JJames Can you write your question please?

D

drcolonel•1/27/24, 2:04 PM

My question is Do we use next api routes If we're creating next js application with cloudflare or we are using workers?!

J

JamesOP•1/27/24, 2:28 PM

Yes you use next.js API routes if you want to deploy a full stack next.js app to cloudflare

Ssathoro the exceptions that should be getting logged are happening in the browser, but t...

J

JamesOP•1/27/24, 2:30 PM

Would something like react-error-boundary help here perhaps?

JJames Yes you use next.js API routes if you want to deploy a full stack next.js app to...

D

drcolonel•1/27/24, 4:13 PM

What about workers what's the use case of it in Next js application, sorry If it seems basic questions but as I said I'm totally new to cloudflare

Ddrcolonel What about workers what's the use case of it in Next js application, sorry If it...

J

JamesOP•1/27/24, 5:25 PM

When you use

@cloudflare/next-on-pages

@cloudflare/next-on-pages

, it generates a worker that is deployed along with the static assets for your Pages project. That worker handles all incoming requests to your Next.js Pages project

JJames When you use `@cloudflare/next-on-pages`, it generates a worker that is deployed...

D

dev.Mohamed•1/27/24, 6:16 PM

i need to use Cloudflare API routes nested of next API routes, how to do it and access my end point inside functions directory

J

JamesOP•1/27/24, 6:25 PM

The functions directory doesn't work with next-on-pages as we generate our own worker for your route. You should be using next.js API routes if you're using next-on-pages

JJames The functions directory doesn't work with next-on-pages as we generate our own w...

D

dev.Mohamed•1/27/24, 6:29 PM

ok, should i add export const runtime = "edge" in the top level of my routes in next API routes to make it run on the edge servers

Ddev.Mohamed ok, should i add export const runtime = "edge" in the top level of my routes in ...

D

Deo Kumar•1/27/24, 6:37 PM

Yes, every api routes must have a export const runtime = "edge" in order to make it work on Cloudflare pages

JJames The functions directory doesn't work with next-on-pages as we generate our own w...

M

mohamed.adham•1/27/24, 6:37 PM

Does the Wrangler cli work in next-on-pages?

I create a project with next and cloudflare,
Added the wrangler.toml file in the root after installing Wrangler cli and trying to run the local host development server but it doesn't.
I use the command
Wrangler pages dev

DDeo Kumar Yes, every api routes must have a export const runtime = "edge" in order to make...

M

mohamed.adham•1/27/24, 6:38 PM

so in the next-on-pages we don't use the Functions directory for API routes nested we use Next API routes but adding at the top level
export const runtime="edge"

Mmohamed.adham so in the next-on-pages we don't use the Functions directory for API routes nest...

D

Deo Kumar•1/27/24, 6:40 PM

Yes, functions directory doesn't work when using next-on-pages.

D

Deo Kumar•1/27/24, 6:43 PM

It uses vercel to build your app and generates a _worker.js based on your routes if I am not wrong.

DDeo Kumar It uses vercel to build your app and generates a _worker.js based on your routes...

M

mohamed.adham•1/27/24, 6:44 PM

No I need to use cloudflare pages not vercel..
Explain it more please

DDeo Kumar It uses vercel to build your app and generates a _worker.js based on your routes...

M

mohamed.adham•1/27/24, 6:45 PM

You mean next-on-pages use vercel to build the app ?

M

mohamed.adham•1/27/24, 6:46 PM

So where is the cloudflare role in it ??
Just hosting ??

I tried to understand it from the documentation but I feel something is missing.

Mmohamed.adham No I need to use cloudflare pages not vercel.. Explain it more please

D

Deo Kumar•1/27/24, 6:47 PM

next-on-pages uses vercel-cli to build next.js application for the edge runtime and then do some extra tasks internally to make it compatible with Cloudflare pages.

DDeo Kumar next-on-pages uses vercel-cli to build next.js application for the edge runtime ...

M

mohamed.adham•1/27/24, 6:51 PM

so you mean when I use

npm create cloudflare@latest -- --framework=next

It uses vercel to build the project and make it compatible with cloudflare ??

Mmohamed.adham so you mean when I use npm create cloudflare@latest -- --framework=next It u...

D

Deo Kumar•1/27/24, 6:52 PM

GitHub

next-on-pages/packages/next-on-pages at main · cloudflare/next-on-p...

CLI to build and develop Next.js apps for Cloudflare Pages - cloudflare/next-on-pages

M

mohamed.adham•1/28/24, 6:03 AM

Does wrangler work with 'next-on-pages' ??
or should I use the next localhost development server as usual

Mmohamed.adham Does wrangler work with 'next-on-pages' ?? or should I use the next localhost d...

H

Hello, I’m Allie!•1/28/24, 9:47 AM

It does work, in the sense that you can build your project then run it with Wrangler. But, if you want live changes to show up, run it with the

next

next

next

next server

D

dev.Mohamed•1/28/24, 12:27 PM

when i'm trying to start development server with wrangler "wrangler pages dev" it gives me an error of static directory doesn't specified but I ensured that i build the application before and exported it's static to an Out directory and specified the out directory in the wrangler.toml file,

so can any one explain that to me?
or should I use next development server "npm run dev" nested of using wrangler?

Ddev.Mohamed when i'm trying to start development server with wrangler "wrangler pages dev" i...

H

Hello, I’m Allie!•1/28/24, 1:01 PM

You need to provide the output directory to the dev command, like so:

wrangler pages dev outdir

wrangler pages dev outdir

wrangler pages dev outdir

wrangler pages dev outdir

Yeah if you use the Link component it will automatically prefetch the RSC payload for every link in

Similar Threads