I've a simple Next.js app on Netlify that open a form to click on the subscribe button.

Code

Here is the index file:

pages/index.js

import React from 'react';
import { SubscribeModal } from '../components/SubscribeModal';

export default function Home() {
  const [open, setOpen] = React.useState(false);

  return (
    <div>
      <button onClick={() => setOpen(true)}>Sign in in newsletters</button>
      <SubscribeModal
        open={open}
        onClose={() => setOpen(false)}
        onSuccess={() => setOpenBadNews(true)}
      />
    </div>
  );
}

Here is the modal:

components/SubscribeModal.js

import { Dialog, DialogTitle } from '@mui/material';

export function SubscribeModal({ open, onClose, onSuccess }) {
  return (
    <Dialog onClose={onClose} open={open}>
      <DialogTitle>
        <b>Login</b>
      </DialogTitle>
      <form name="contact" action="/success" method="POST" data-netlify="true">
        <input type="hidden" name="form-name" value="contact" />
        <p>
          <label htmlFor="youremail">Your Email: </label>{' '}
          <input type="email" name="email" id="youremail" />
        </p>
        <p>
          <button type="submit">Send</button>
        </p>
      </form>
    </Dialog>
  );
}

I also have a simple pages/success.js app with a success message.

Problem

When I click on the submit button, a 404 page appear.

Tried solution

• I've tried every tag in the form tag.
• I've tried with Next build & Next export and with default Next config deploy.
• I've tried with Material UI component or HTML native elements

Someone has an idea?