Here is the documentation (legacy): https://nextjs.org/docs/pages/api-reference/components/image-leg

339dylan New to using Next.js, I'm running `next build` for my static site and I'm seeing...

D

Deo KumarOP•1/11/24, 6:17 PM

To check the assets which were uploaded, you can navigate to deployment details > Assets Uploaded
Are you using output: "export" ?

DDeo Kumar To check the assets which were uploaded, you can navigate to deployment details ...

3

39dylan•1/11/24, 6:43 PM

Yes, I'm using static exports for next.js... tried the assets uploaded tab initially but my browser will crash when loading 18k files but it did give me info about

.txt

.txt

.txt

.txt files being created for each page due to using App Router reverting to Pages Router fixes this.

3

39dylan•1/11/24, 6:47 PM

However it seems like i18n with Pages Router cannot

output: 'export'

output: 'export'

output: 'export'

output: 'export' so I'm back to square one

3

39dylan•1/11/24, 6:48 PM

I will try and modify my build script to delete

*.txt

*.txt

*.txt

*.txt files at the end and see how that goes

DDeo Kumar Here is the documentation (legacy): https://nextjs.org/docs/pages/api-reference/...

D

Donnager•1/11/24, 7:28 PM

okay interesting, yeah i don't see a reference to that approach, but thinking it through more i guess the idea is if you understand the primitives (html img element + api routes), it just naturally follows that the pattern works, i just need to learn more hehe

L

localλorse•1/11/24, 8:04 PM

Hey, is it possible to have a reverse proxy on cloudflare, so that I can merge a CF-hosted nextjs app with a hugo-generated static landing page and a hostinger-hosted blog, on different subdomains? (E.g. app on

app.mydomain.com

app.mydomain.com

app.mydomain.com

app.mydomain.com, blog on

blog.mydomain.com

blog.mydomain.com

blog.mydomain.com

blog.mydomain.com, landing page on

mydomain.com

mydomain.com

mydomain.com

mydomain.com)

B

Befus•1/12/24, 9:36 AM

I am trying to check if my request has been succesfull or errored but the return type is void, anyone know how to fix this?

BBefus I am trying to check if my request has been succesfull or errored but the return...

H

Hello, I’m Allie!•1/12/24, 9:40 AM

If that is a

KV

KV

KV

KV namespace, then it is valid behaviour that it returns void. It will throw an error if something goes wrong

B

Befus•1/12/24, 9:42 AM

Yea it's a KV namespace, I'm trying to show the use a message if something goes wrong is that not possible then?

BBefus Yea it's a KV namespace, I'm trying to show the use a message if something goes ...

H

Hello, I’m Allie!•1/12/24, 9:43 AM

You can use a

try/catch

try/catch

try/catch

try/catch

HHello, I’m Allie!You can use a `try/catch`

B

Befus•1/12/24, 12:10 PM

Thank you, this seems to work

T

t•1/12/24, 3:46 PM

Need help with Next on pages prod deployment. I get 500 Internal Server Error when loading the page. The preview deployment works fine for some reason, its just the production deployment

J

James•1/12/24, 4:05 PM

Are you using smart placement or log stream?

T

t•1/12/24, 4:26 PM

yes to smart placement, only look at real time logs occasionally for debugging, does that affect it?

J

James•1/12/24, 4:54 PM

disable smart placement and try redeploying

J

James•1/12/24, 4:55 PM

it's caused internal server errors when enabling it with pages for months now

T

t•1/12/24, 4:56 PM

just tried and seems to be working so far, thanks for the tip

T

t•1/12/24, 4:57 PM

any idea why it only happens on the production deployment?

J

James•1/12/24, 5:28 PM

because smart placement is broken with pages

A

advaith•1/16/24, 7:31 AM

trying to run it locally for development and getting this error

A

advaith•1/16/24, 7:32 AM

is it just the windows incompatibility?

J

James•1/16/24, 7:35 AM

Please can you open an issue in the GitHub for this

B

Befus•1/20/24, 11:25 AM

In production with this ssg generated page we get a ton of requests like this, anybody familiar with this?

B

Befus•1/20/24, 11:26 AM

I believe it has something to do with caching, just not sure

BBefus In production with this ssg generated page we get a ton of requests like this, a...

J

James•1/20/24, 12:02 PM

That looks like Next.js' default prefetching behaviour when using the Next.js Link component. You can pass prefetch={false} I think it is to disable this behaviour.

J

James•1/20/24, 12:03 PM

(assuming the comment was about all those requests happening when you visit one page and not just normal navigation around)

J

James•1/20/24, 12:04 PM

The RSC payload requests are for React Server Components to work properly on soft navigation between routes. The use a query parameter so that it plays friendly with CDNs that don't respect the

vary

vary

vary

vary header

JJames That looks like Next.js' default prefetching behaviour when using the Next.js Li...

B

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

Damn didn't know, so does it prefetch the full route the link is going to?

BBefus Damn didn't know, so does it prefetch the full route the link is going to?

J

James•1/20/24, 12:12 PM

Yeah if you use the Link component it will automatically prefetch the RSC payload for every link in the viewport (iirc), and that RSC payload will then be used when the link is clicked and cached in the browser tab for 5 mins i believe it is until refreshing (i think)

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

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

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

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

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

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

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?

Here is the documentation (legacy): https://nextjs.org/docs/pages/api-reference/components/image-leg

Similar Threads