[🐛 Bug]: Calling server actions on a static or SSR pages returns 405: Method Not Allowed

[Maronato]

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: (12) arm64 Apple M2 Max
        Memory: 64 GB
        Shell: /bin/zsh
Package Manager Used: npm (9.8.1)

Relevant Packages:
        @cloudflare/next-on-pages: 1.9.0
        vercel: 33.5.2
        next: 14.1.0

Description

Next allows server actions on static, SSR and edge routes.
next-on-pages, however, doesn't seem to register POST routes if the page isn't using the edge runtime, causing them to return 405s.

Reproduction

Repo: https://github.com/Maronato/next-on-pages-server-actions-repro
The files changed in the repo are src/action.ts and src/app/hello/page.tsx

Repo setup

1. Clone it
2. npm install

Desired behavior

1. Run npm run dev (alternatively, npm run build, npm run start)
2. Go to https://localhost:3000/hello
3. Click the button and see that the request succeeds

Pages behavior

1. npm run preview
2. Go to https://localhost:3000/hello
3. Click the button and see that the request fails

Pages Deployment Method

None

Pages Deployment ID

No response

Additional Information

No response

Would you like to help?

• Would you like to help fixing this bug?

[james-elicx]

Please can you try passing your server action from a server component to a child component as a prop, as a workaround?

[Maronato]

I updated the reproduction repo so src/app/hello/page.tsx is a server component and passes the action to the client component src/components/MyComponent.tsx.

It works fine in dev and with next start, but gives the same error with wrangler.

[public-daniel]

I ran into the same issue. For now, I just moved from Cloudflare Pages to Vercel and that fixed it. I would love to move back when/if this gets resolved. I'm not a very good frontend developer, so I wanted to follow along with the latest Next.js docs / online content.

[karimkaylani]

Same issue here

[TimKieu]

Yeah, I got same 405 on POST forms for Next-Auth V5beta (edge ready) or Iron-session v8 (edge ready).
I try to debug but CF debuger only show the POST url causing the error, e.g: https://my-next-on-pages-app.pages.dev/auth/login
Thus, I think that the POST method is limited somewhere.

[fpunny]

any updates on this? :/

[james-elicx]

I haven't investigated it because I've been pretty busy, but my assuption would be if you're calling it from a prerendered/non-edge route, i would speculate that on Vercel they bypass the prerendered route and invoke the nodejs fallback function for action calls on static routes, which is not something we are able to do.

It's a theory that would make sense - how would you be able to call a server action if there is no function for it to invoke at that route? So, I would imagine that route's would need to use the edge runtime to call a server action, so that there is actually a function that it can run for your action call.

[ImLunaHey]

For those coming from google. The "workaround" is to just make sure all pages are using edge with this line in your page.tsx.

export const runtime = 'edge';

[TimKieu]

For those coming from google. The "workaround" is to just make sure all pages are using edge with this line in your page.tsx.

export const runtime = 'edge';

This is not good as the page counted as an edge function then you all pay for it like a worker request, which is not fairplay for web pages.
I must give up all Nextjs ptojects and back to React to play with Cloudflare.
Vercel can solve this but they are not CF.

[james-elicx]

This is not good as the page counted as an edge function then you all pay for it like a worker request, which is not fairplay for web pages.

You pay for a worker request on requests to all routes with next-on-pages, because all requests to your routes go through our routing system in order to be correctly matched up to the page (whether prerendered or SSR'd).

I'm not sure I follow how you'd expect a server action to work when there's no edge function for the action to invoke?