Tengo una aplicación Next.js simple en Netlify que abre un formulario para hacer clic en el botón de suscripción.

Código

Aquí está el archivo de índice:

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> ); }

Aquí está el 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> ); }

También tengo una aplicación sencilla de pages/success.js con un mensaje de éxito.

Problema

Cuando hago clic en el botón Enviar, aparece una página 404.

solución probada

• He probado todas las etiquetas en la etiqueta de formulario.
• Lo probé con Next build & Next export y con la implementación predeterminada de Next config.
• Lo probé con el componente Material UI o elementos nativos HTML

¿Alguien tiene una idea?