Issue with Next.js 14 Server Actions on Netlify: 404 Error on POST Request

Support
1

Hi,

I’m experiencing an issue with Next.js 14 server actions on my Netlify deployed site and I’m hoping to get some insights or solutions.

Site details:

The form in mind is located at: peaceful-bubblegum-77fa4e.netlify.app/new and it’s the upload image button.

Issue:
When I attempt to submit a form using Next.js 14 server actions with a POST request, I receive a 404 error response. This issue is occurring on the published Netlify site, whereas it functions as expected locally.

Here is a link to the Next.js server actions documentation for reference: Next.js Server Actions Documentation

Questions:

  1. Are Next.js server actions compatible with Netlify’s hosting environment?
  2. Has anyone experienced a similar issue or have any suggestions on how to resolve this 404 error?

Any help or guidance would be greatly appreciated. Thank you in advance for your time and assistance!

Thanks!

2 Likes
2

Next.js 14 doesn’t work well at the moment.

3

okay, so no workarounds or other tips?

4

Hi, you can try downgrading to the previous version in the meantime?

5

Have the same problem. Tried downgrading to next 13. Still not working. Tried upgrading to 14.0.5-canary.12. Same, same.

6

As mentioned, it’s not gonna work right now.

7

I’ve been running into this trying to get a form submission to work. It is recognized, all the fields are listed in the deploy but no matter what url I submit to I get a 404. Assuming it’s related (seems highly likely since I’m also running NextJS 14) what is the latest version that will work?

8

We recommend using any version prior to 13.5.

9

Confirming that downgrading to 13.4 immediately works. This is very disappointing honestly that it doesn’t work and there is no documentation that 13.5 / 14 won’t work properly…

3 Likes
10

I ran into the same problem while using next "next": "^14.0.4" I fixed it by downgrading to "next": "13.4.9" and adding

const nextConfig = {
	experimental: {
		serverActions: true
	}
};

in next.config.js

4 Likes
11

thanks for sharing the solution with the community.

12

It was reported in November that this is not working in v14. Is there an ETA for server actions?
This article from December 1. says “With the introduction of Next.js 14, Server Actions are now stable”

1 Like
13

No public ETA. It will be announced once it’s available.

14

I found a workaround using nextjs 14. I wrote my on form onSubmit event handler function to send a POST request to the netlify endpoint.

export async function submit(formData: any) {
  const msg = [ 'Received new form submission' ]
  for (const [key, value] of formData) {
    msg.push(`${key} => ${value}`)
  }
  msg.push('==================================================')
  console.log(msg.join('\n'))
  const response = await fetch(process.env.baseUrl + "/", {
    method: "POST",
    headers: { "Content-Type": "application/x-www-form-urlencoded" },
    body: new URLSearchParams(formData).toString(),
  })

  return response.ok
}

...
// then in your component
<form
  onSubmit={e => {
    e.preventDefault()
    const formData = new FormData(e.target)
  
    submit(formData)
      .then(ok => console.log(ok ? 'succeeded' : 'failed'))
  }}
>
{/* put your form fields here */}
</form>
...
1 Like
15

Hiya, :wave:t6: thanks so much for sharing this with the community! :+1:t6:

16

Hi! I just figured out this issue is only resolved by downgrading to 13.4.9. However, I was not able to find this in Next.js Issues Issues · vercel/next.js · GitHub (nextjs 14 - dynamic route js file returns 404 (only in production) · Issue #58895 · vercel/next.js · GitHub) possibly this one?

If anyone is aware of an open issue please share, since I would like to track this and hopefully know when it is resolved in the latest version so I can upgrade my project.

17

Been waiting patiently. Gotta move to Vercel, I guess.

18

Netlify has it’s own server side functions, as of right now a work around is to have netflify server side function calls which you must place in
/netlify/functions/getAffiliateUrl.js

Example getAffiliateUrl.js:

export async function handler(event, context) {
    return {
        statusCode: 200,
        body: JSON.stringify({ url: process.env.AFFILIATE_URL }),
    };
}

Use within next.js:

const getAffiliateUrl = async () => {
    const response = await fetch("/.netlify/functions/getAffiliateUrl");
    if (!response.ok) {
        throw new Error("Failed to fetch affiliate URL");
    }
    const data = await response.json();
    return data.url;
};

Yes, it’s not user friendly. I’m aware. Just pointing out the direct conflict of netlify infrastructure of server side functions and the new feature of next.js. So I’m not certain a workaround is forthcoming considering this conflict of interest.

19

thanks for sharing this context with the community. :+1:t6:

20

bumping this; I ran into this issue too.

I also made a demo with the bug here: GitHub - GitToby/app-router-template: demo app to test issues with nextjs 14 on netlify server actions

which is live @ https://incredible-caramel-bbb506.netlify.app/

it may be bad form on my part to mention but Vercel doesn’t have this issue with its deployment of server actions - I’ve deployed the same code here: https://app-router-template.vercel.app/