you need to set up a service binding to your Pages application to a worker, then you can access the

DDario you need to set up a service binding to your Pages application to a worker, then...

T

thanhle•4/3/24, 9:27 PM

Can I just setup a new worker. Deploy to Cloudflare. That worker has a url. On my page I just use fetch with that url like a normal url.

T

thanhle•4/3/24, 9:27 PM

I am not sure which one is a best practice. Since both of them still work

Tthanhle I am not sure which one is a best practice. Since both of them still work

H

Hello, I’m Allie!•4/3/24, 9:29 PM

Service Bindings are best practice, since they are faster, plus they also prevent anyone else from accessing the second Worker

Tthanhle I am not sure which one is a best practice. Since both of them still work

D

DarioOP•4/3/24, 9:34 PM

have you tried the version without the binding? as far as I know that shouldn't work...

N

neoney•4/3/24, 11:00 PM

made my first nextjs page on cloudflare pages, with working db and auth :D

0

0xwei_hup•4/4/24, 10:03 AM

has anyone gotten middleware to work in pages with nextjs?

0

0xwei_hup•4/4/24, 10:04 AM

do you name it normally at the root of your project

middleware.ts

middleware.ts

? or create it under

functions/_middleware.ts

functions/_middleware.ts

?

0

0xwei_hup•4/4/24, 10:05 AM

a bit confused hahah

D

DarioOP•4/4/24, 10:38 AM

Hi @0xwei_hup

are you trying to create a full stack Next.js application?

or a static Next.js application with some server side logic implemented with

functions/

functions/

?

DDario Hi <@266533085732929548> 🙂 👋 are you trying to create a full stack Next.js a...

0

0xwei_hup•4/4/24, 10:39 AM

full stack next.js 2112_wave_animated

D

DarioOP•4/4/24, 10:39 AM

ah ok, so you should use a proper

middleware.ts

middleware.ts

D

DarioOP•4/4/24, 10:40 AM

and please keep in mind that

functions/

functions/

is incompatible with

next-on-pages

next-on-pages

, you cannot use those at all

0

0xwei_hup•4/4/24, 10:40 AM

ohh so just like according to nextjs official docs? like just put at root level

middleware.ts

middleware.ts

?

00xwei_hup ohh so just like according to nextjs official docs? like just put at root level ...

D

DarioOP•4/4/24, 10:40 AM

yes, exactly

0

0xwei_hup•4/4/24, 10:41 AM

aite aite, thanks so much, just another question, so if i'm doing static instead, i can use

functions/

functions/

?

D

DarioOP•4/4/24, 10:41 AM

You can see an example of a

middleware.ts

middleware.ts

being used with

next-on-pages

next-on-pages

here: https://github.com/dario-piotrowicz/next-apps-for-testing/tree/master/apps/middleware-13.2.4

GitHub

next-apps-for-testing/apps/middleware-13.2.4 at master · dario-piot...

very simple nextjs apps used to manually test next-on-pages, until we find a better solution - dario-piotrowicz/next-apps-for-testing

0

0xwei_hup•4/4/24, 10:41 AM

Wow that's cool, thanks a lot sir salute

00xwei_hup aite aite, thanks so much, just another question, so if i'm doing static instead...

D

DarioOP•4/4/24, 10:42 AM

yes, but then you can't use Next.js' server features

D

DarioOP•4/4/24, 10:42 AM

so you can either do: Static Next.js with

functions/

functions/

or full stack Next.js without

functions/

functions/

D

DarioOP•4/4/24, 10:43 AM

unless you have some specific concerns/reasons you should just go with the full stack solution

00xwei_hup Wow that's cool, thanks a lot sir <:salute:1095822005942620202>

D

DarioOP•4/4/24, 10:43 AM

my pleasure

T

thanhle•4/4/24, 1:32 PM

hello. I just try and get service binding work with next-on-pages. my question is is it correct the second worker will be execute asap when using service binding, no network ahead or latency when compared to normal http request.

T

thanhle•4/4/24, 1:48 PM

for the service binding: can we use honojs package to write the worker code, because the .env.MY_SERVICE.fetch explicitly use fetch method on the Worker. With hono, it looks smthing like this: app.get, app.post so there is no fetch expose here.

Tthanhle for the service binding: can we use honojs package to write the worker code, bec...

H

Hello, I’m Allie!•4/4/24, 1:48 PM

Hono does expose app.fetch

H

Hello, I’m Allie!•4/4/24, 1:49 PM

K

Kris•4/4/24, 1:50 PM

I'm not sure if the actual issue is https://github.com/cloudflare/workers-sdk/issues/1074, but when following https://developers.cloudflare.com/pages/framework-guides/nextjs/deploy-a-nextjs-site/ with git integration, the initial deployment always does not work because either nodejs_compat is not settable in the new pages with git wizard in the web console, or the wrangler setting is ignored as in the bug. It is not a huge deal to push another change to do a new deployment after adding the setting, but wondering if there is a change that can be done to the starter template to address this.

KKris I'm not sure if the actual issue is https://github.com/cloudflare/workers-sdk/is...

K

Kris•4/4/24, 1:53 PM

It seems like it should be addressable on the web console side because I'd expect it to be done when selecting the "Next" pages configuration in the new git pages app dialog.

D

DarioOP•4/4/24, 3:09 PM

@Kris if you create your Next.js app via C3 and deploy it (still via C3), the flag gets set for you by C3 (which makes an API call for it)

But anyways since now Pages supports wrangler.toml I'm guessing we should be able to add the flag to the template toml file and that should just get picked up.... I'll have to check

HHello, I’m Allie!Click to see attachment

B

bun•4/4/24, 3:13 PM

tyepscript?

DDario <@766428393070788658> if you create your Next.js app via C3 and deploy it (still...

K

Kris•4/4/24, 3:14 PM

Ok. I am just getting started and have recreated apps a few times. For some reason I'm currently under the impression that using the CLI deploy doesn't create a git integration, and the git integration isn't possible to add later. If you want git integration need to create a new pages app from scratch as far as I know/encountered.

B

bun•4/4/24, 3:16 PM

export default {
  fetch: app.fetch,
  scheduled: async (c, env, ctx) => {}
} satisfies ExportedHandler<Env>;

export default {
  fetch: app.fetch,
  scheduled: async (c, env, ctx) => {}
} satisfies ExportedHandler<Env>;

export default {
  fetch: app.fetch,
  scheduled: async (c, env, ctx) => {}
} satisfies ExportedHandler<Env>;

export default {
  fetch: app.fetch,
  scheduled: async (c, env, ctx) => {}
} satisfies ExportedHandler<Env>;

@Hello, I’m Allie! this more correct i think

KKris Ok. I am just getting started and have recreated apps a few times. For some reas...

D

DarioOP•4/4/24, 3:22 PM

yes, unfortunately currently you can't add the git integration after having done a manual CLI deployment

Bbun ```ts export default { fetch: app.fetch, scheduled: async (c, env, ctx) => {...

H

Hello, I’m Allie!•4/4/24, 5:45 PM

I just screenshotted the docs

K

Kimitri•4/5/24, 5:16 AM

good morning guys. I have a trouble, I'm trying to deploy a Nextjs application on Cloudflare following the documentation, and to do it I need to install da package @cloudflare/next-on-pages, the problema is this package in the current version 1.11.0 have 6 vulnerabilities, 3 low and 3 moderate. Take a look

 # npm audit report

debug  4.0.0 - 4.3.0
Regular Expression Denial of Service in debug - https://github.com/advisories/GHSA-gxpj-cx7g-858c
fix available via `npm audit fix`
node_modules/@vercel/fun/node_modules/debug
  @vercel/fun  <=1.1.0
  Depends on vulnerable versions of debug
  Depends on vulnerable versions of semver
  node_modules/@vercel/fun
    vercel  28.12.3 || 29.0.1 - 29.0.3 || >=32.0.2
    Depends on vulnerable versions of @vercel/fun
    Depends on vulnerable versions of @vercel/node
    node_modules/vercel

semver  7.0.0 - 7.5.1
Severity: moderate
semver vulnerable to Regular Expression Denial of Service - https://github.com/advisories/GHSA-c2qf-rxjj-qqgw
fix available via `npm audit fix`
node_modules/@vercel/fun/node_modules/semver

undici  <=5.28.3
Undici proxy-authorization header not cleared on cross-origin redirect in fetch - https://github.com/advisories/GHSA-3787-6prv-h9w3
Undici's fetch with integrity option is too lax when algorithm is specified but hash value is in incorrect - https://github.com/advisories/GHSA-9qxr-qj54-h672      
Undici's Proxy-Authorization header not cleared on cross-origin redirect for dispatch, request, stream, pipeline - https://github.com/advisories/GHSA-m4v8-wqvr-p9f7fix available via `npm audit fix`
node_modules/@vercel/node/node_modules/undici
  @vercel/node  2.14.0 || >=3.0.2
  Depends on vulnerable versions of undici
  node_modules/@vercel/node

6 vulnerabilities (3 low, 3 moderate)

 # npm audit report

debug  4.0.0 - 4.3.0
Regular Expression Denial of Service in debug - https://github.com/advisories/GHSA-gxpj-cx7g-858c
fix available via `npm audit fix`
node_modules/@vercel/fun/node_modules/debug
  @vercel/fun  <=1.1.0
  Depends on vulnerable versions of debug
  Depends on vulnerable versions of semver
  node_modules/@vercel/fun
    vercel  28.12.3 || 29.0.1 - 29.0.3 || >=32.0.2
    Depends on vulnerable versions of @vercel/fun
    Depends on vulnerable versions of @vercel/node
    node_modules/vercel

semver  7.0.0 - 7.5.1
Severity: moderate
semver vulnerable to Regular Expression Denial of Service - https://github.com/advisories/GHSA-c2qf-rxjj-qqgw
fix available via `npm audit fix`
node_modules/@vercel/fun/node_modules/semver

undici  <=5.28.3
Undici proxy-authorization header not cleared on cross-origin redirect in fetch - https://github.com/advisories/GHSA-3787-6prv-h9w3
Undici's fetch with integrity option is too lax when algorithm is specified but hash value is in incorrect - https://github.com/advisories/GHSA-9qxr-qj54-h672      
Undici's Proxy-Authorization header not cleared on cross-origin redirect for dispatch, request, stream, pipeline - https://github.com/advisories/GHSA-m4v8-wqvr-p9f7fix available via `npm audit fix`
node_modules/@vercel/node/node_modules/undici
  @vercel/node  2.14.0 || >=3.0.2
  Depends on vulnerable versions of undici
  node_modules/@vercel/node

6 vulnerabilities (3 low, 3 moderate)

 # npm audit report

debug  4.0.0 - 4.3.0
Regular Expression Denial of Service in debug - https://github.com/advisories/GHSA-gxpj-cx7g-858c
fix available via `npm audit fix`
node_modules/@vercel/fun/node_modules/debug
  @vercel/fun  <=1.1.0
  Depends on vulnerable versions of debug
  Depends on vulnerable versions of semver
  node_modules/@vercel/fun
    vercel  28.12.3 || 29.0.1 - 29.0.3 || >=32.0.2
    Depends on vulnerable versions of @vercel/fun
    Depends on vulnerable versions of @vercel/node
    node_modules/vercel

semver  7.0.0 - 7.5.1
Severity: moderate
semver vulnerable to Regular Expression Denial of Service - https://github.com/advisories/GHSA-c2qf-rxjj-qqgw
fix available via `npm audit fix`
node_modules/@vercel/fun/node_modules/semver

undici  <=5.28.3
Undici proxy-authorization header not cleared on cross-origin redirect in fetch - https://github.com/advisories/GHSA-3787-6prv-h9w3
Undici's fetch with integrity option is too lax when algorithm is specified but hash value is in incorrect - https://github.com/advisories/GHSA-9qxr-qj54-h672      
Undici's Proxy-Authorization header not cleared on cross-origin redirect for dispatch, request, stream, pipeline - https://github.com/advisories/GHSA-m4v8-wqvr-p9f7fix available via `npm audit fix`
node_modules/@vercel/node/node_modules/undici
  @vercel/node  2.14.0 || >=3.0.2
  Depends on vulnerable versions of undici
  node_modules/@vercel/node

6 vulnerabilities (3 low, 3 moderate)

 # npm audit report

debug  4.0.0 - 4.3.0
Regular Expression Denial of Service in debug - https://github.com/advisories/GHSA-gxpj-cx7g-858c
fix available via `npm audit fix`
node_modules/@vercel/fun/node_modules/debug
  @vercel/fun  <=1.1.0
  Depends on vulnerable versions of debug
  Depends on vulnerable versions of semver
  node_modules/@vercel/fun
    vercel  28.12.3 || 29.0.1 - 29.0.3 || >=32.0.2
    Depends on vulnerable versions of @vercel/fun
    Depends on vulnerable versions of @vercel/node
    node_modules/vercel

semver  7.0.0 - 7.5.1
Severity: moderate
semver vulnerable to Regular Expression Denial of Service - https://github.com/advisories/GHSA-c2qf-rxjj-qqgw
fix available via `npm audit fix`
node_modules/@vercel/fun/node_modules/semver

undici  <=5.28.3
Undici proxy-authorization header not cleared on cross-origin redirect in fetch - https://github.com/advisories/GHSA-3787-6prv-h9w3
Undici's fetch with integrity option is too lax when algorithm is specified but hash value is in incorrect - https://github.com/advisories/GHSA-9qxr-qj54-h672      
Undici's Proxy-Authorization header not cleared on cross-origin redirect for dispatch, request, stream, pipeline - https://github.com/advisories/GHSA-m4v8-wqvr-p9f7fix available via `npm audit fix`
node_modules/@vercel/node/node_modules/undici
  @vercel/node  2.14.0 || >=3.0.2
  Depends on vulnerable versions of undici
  node_modules/@vercel/node

6 vulnerabilities (3 low, 3 moderate)

KKimitri good morning guys. I have a trouble, I'm trying to deploy a Nextjs application o...

K

Kimitri•4/5/24, 5:21 AM

the way that I tried to fix it is by installing the vercel package version 32.3.0 bit it maintain the 3 low vulnerabilities, and when I update the vercel package to latest version 33.6.3, the 3 moderate vulnerabilities come back, have some one experienced this issue?

M

MylesBolton•4/5/24, 9:05 AM

any way for me to use nodemailer

M

MylesBolton•4/5/24, 9:05 AM

had just fixed all my errors to find out i cant use it

M

MylesBolton•4/5/24, 9:07 AM

i will have to figure out how to use functions tomorow then at some point it seems

J

James•4/5/24, 9:11 AM

the name nodemailer implies that it's designed specifically work in nodejs so it'll likely have incompatibilities with the edge runtime

JJames the name nodemailer implies that it's designed specifically work in nodejs so it...

M

MylesBolton•4/5/24, 9:12 AM

yes i wasent really thinking that far ahead tbf

M

MylesBolton•4/5/24, 9:13 AM

i dont think there is anything else that can take a email login e.g. SMTP creds and send out a email though it locally

G

G O A T•4/5/24, 3:00 PM

hey, i was wondering if anyone has had any success migrating from vercel to cloudflare for their next.js 14 project. i am looking to do so as i use cloudflare for other parts of my project and cloudflare is nice and cheap. However, I was wondering if cloudflare fully supports all the features that next.js uses?

J

James•4/5/24, 3:07 PM

We have a supported doc that I would recommend giving a quick look. The notable call outs are that we are not able to support Incremental Static Regeneration or Partial Prerendering due to limitations around how they work (they depend on nodejs).

V

Venkat Dinavahi•4/5/24, 3:13 PM

Hey all, for local development I'm seeing that I can now just call

next start

next start

and it magicaly works through this addition:

if (process.env.NODE_ENV === "development") {
  const { setupDevPlatform } = require("@cloudflare/next-on-pages/next-dev")
  setupDevPlatform()
}

if (process.env.NODE_ENV === "development") {
  const { setupDevPlatform } = require("@cloudflare/next-on-pages/next-dev")
  setupDevPlatform()
}

if (process.env.NODE_ENV === "development") {
  const { setupDevPlatform } = require("@cloudflare/next-on-pages/next-dev")
  setupDevPlatform()
}

if (process.env.NODE_ENV === "development") {
  const { setupDevPlatform } = require("@cloudflare/next-on-pages/next-dev")
  setupDevPlatform()
}

This is quite amazing, but I'm trying to figure out how to enable connecting to real remote objects instead of a mocked version (through miniflare). Something equivalent to this wrangler command:

npx wrangler dev --remote

npx wrangler dev --remote

npx wrangler dev --remote

npx wrangler dev --remote

Is there a way to enable the

--remote

--remote

--remote

--remote flag when I call

next start

next start

?

G

G O A T•4/5/24, 3:20 PM

thanks james

VVenkat Dinavahi Hey all, for local development I'm seeing that I can now just call `next start` ...

J

James•4/5/24, 3:24 PM

Afraid not since the next dev bindings are using miniflare which is local-only emulation

V

Venkat Dinavahi•4/5/24, 3:26 PM

It seems like it should be possible in theory:
https://developers.cloudflare.com/workers/testing/local-development/#develop-locally-using-remote-resources-and-bindings

Isn't next-on-pages using wrangler underneath?

Cloudflare Docs

Local development · Cloudflare Workers docs

Develop your Workers locally via Wrangler.

V

Venkat Dinavahi•4/5/24, 3:26 PM

"wrangler dev runs locally by default. This means that all resources and bindings are simulated locally as well. However, there may be times you need to develop against remote resources and bindings. To run wrangler dev remotely, add the --remote flag"

V

Venkat Dinavahi•4/5/24, 3:27 PM

What I'm running into -- our app uses a mix of R2 bindings and the aws presigned urls which makes it tricky to test the app as-is

J

James•4/5/24, 3:28 PM

It uses the getPlatformProxy() utility that ships with wrangler and that utility uses miniflare's magic proxy internally, so it's a bit different to just running wrangler dev

you need to set up a service binding to your Pages application to a worker, then you can access the

Similar Threads

Similar Threads

Similar Threads