NextJS Server Actions useFormState - Missing form submission function handler

Support
, ,
1

I’m having an issue using NextJS server actions with a form submission using the (experimental) useFormState hooks

An example app - https://github.com/vercel/next.js/tree/canary/examples/next-forms

Specifically the AddForm component (use client) with an action (use server).

The form submission returns with 404 in production and running locally with ‘netlify serve’

With ‘netlify dev’ the form fails on ‘localhost:8888’ but works correctly on :3000

The server errors with ‘warning: Missing form submission function handler’

Example site name - https://delightful-semolina-abade6.netlify.app

Thanks!

2

Hi, is this a link to your form? I’m not receiving anything back.

3

https://delightful-semolina-abade6.netlify.app is the example site - the form doesn’t succeed on a submit

4

Hi

This Support Guide is the first port of call to debug any forms issues. Please start here and work through these resources!

We also recommend trying to search the forums or look at topics tagged Netlify forms if you haven’t already - it’s likely your question was already asked by someone else, and there are many solutions to try.

If you are still having problems, please provide more information such as what you have already tried.

5

Thanks Sam. Even though I’m not using Netfliy Forms it looks like I have include a static form in html to enable a NextJS server form action. Maybe I’m being too precious but that doesn’t great as it feels like we’re adding workaround code just to satisfy specific hosting requirements.

6

You don’t need Netlify Forms to get this to work. As long as you post the form data to your server-side functionality (like the API handlers), this would work. In the example you shared, you’re posting the data to the home page - I’m not sure if that’s how it’s supposed to work in Next.js, but it won’t work on Netlify in that manner.