Cloudflare Developers•2y ago

Is that on the latest next-on-pages version?

JJames Is that on the latest next-on-pages version?

Joe•1/10/24, 2:27 PM

1.8.5

DDonnager super interesting that you removed `bindings` and it works, possibly the API all...

Joe•1/10/24, 2:37 PM

sorry I left out some key stuff, this works.

setupDevBindings({
    bindings: {
      'MY_D1': {
        type: 'd1',
        databaseName: 'locations-db'
      }
    },
  });

setupDevBindings({
    bindings: {
      'MY_D1': {
        type: 'd1',
        databaseName: 'locations-db'
      }
    },
  });

Bram•1/10/24, 11:14 PM

Is it possible to partly have local dev bindings and party remote dev bindings?

Bram•1/10/24, 11:15 PM

Let's say, I want to use D1 locally, but R2 remotely during local development

JamesOP•1/11/24, 8:29 AM

The next-dev submodule uses miniflare and does local bindings, so im afraid not

39dylan•1/11/24, 2:01 PM

New to using Next.js, I'm running

next build

next build

for my static site and I'm seeing double the amount of files counting towards my limit for each webpage. Upon inspection there seems to be extra

.meta

.meta

and

.rsc

.rsc

files when building how can I disable non essential static site files like these? Also does Cloudflare Pages have an option for us to check what files are generated and distributed on their CDN after a build is finished?

JamesOP•1/11/24, 2:21 PM

rsc files are essential

JJames rsc files are essential

39dylan•1/11/24, 2:52 PM

Even for a static site? I don't mind missing out on prefetch. Would you recommend I go with something like Astro instead if this is the case?

39dylan•1/11/24, 3:09 PM

Upon closer inspection it seems

/out/

/out/

contains .txt files for each dynamic route page... not sure what these are but will investigate getting rid of them and my problem is fixed

DDeo Kumar I deployed it on Cloudflare pages https://themes.fineshopdesign.com/api/image?u...

Donnager•1/11/24, 5:36 PM

not sure if you are still around sir, but just wanted to say i started using this in dev and blown away how cool this is!

also curiously, how did you learn about the

path

path

setting in the config for the next image? the closest i see in the docs is

remote patterns

remote patterns

and

loaders

loaders

which seems the

path

path

route handler is just in a cleaner/concise syntax if i am understanding it correctly, but if that is wrong would be super interested to learn more!

339dylan Even for a static site? I don't mind missing out on prefetch. Would you recommen...

JamesOP•1/11/24, 5:52 PM

yes. the rsc file is needed for soft navigation. if nextjs cant get the rsc payload it needs, it will results in a hard refresh/navigation instead

DDonnager not sure if you are still around sir, but just wanted to say i started using thi...

Deo Kumar•1/11/24, 6:05 PM

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

Components: (Legacy) | Next.js

Backwards compatible Image Optimization with the Legacy Image component.

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

Deo Kumar•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 ...

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

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

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

However it seems like i18n with Pages Router cannot

output: 'export'

output: 'export'

so I'm back to square one

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

I will try and modify my build script to delete

*.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/...

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

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

, blog on

blog.mydomain.com

blog.mydomain.com

, landing page on

mydomain.com

mydomain.com

)

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...

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

If that is a

KV

KV

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

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 ...

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

You can use a

try/catch

try/catch

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

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

Thank you, this seems to work

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

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

Are you using smart placement or log stream?

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

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

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

disable smart placement and try redeploying

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

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

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

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

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

any idea why it only happens on the production deployment?

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

because smart placement is broken with pages

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

trying to run it locally for development and getting this error

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

is it just the windows incompatibility?

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

Please can you open an issue in the GitHub for this

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?

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...

JamesOP•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.

JamesOP•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)

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

header

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

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?

JamesOP•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...

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

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

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

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

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

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

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

Well that drasticly improved holy

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

Before optimisation it was around 5 seconds

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

Beautiful

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'
}

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

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)

[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' }

Is that on the latest next-on-pages version?

Similar Threads

Similar Threads

Similar Threads