NextJS & Netlify Form Debugging

The Network request when a user submits a form comes from the client browser, so is always going to be related to your own front-end code and largely ‘out-of-scope’ for support here, but I’ll take a quick look and report what I can see.

That’s the case if it really is generating at least one static HTML file that contains the plain form with the appropriate Netlify attributes.

It isn’t the case, even when a site is “static”, if it’s constructed in a way where the form only exists within JavaScript and is injected into the HTML at runtime (some SPA’s [Single Page Application’s] operate like this).

In the case of the silverperkcoffee.com site, you can see that the form exists in the main /index.html page by using the browsers view source feature on the homepage, so it should be picked up…

Except you’re also using also using Next which is a whole other thing to consider, since factoring in things like SSR it’s entirely possible that page was generated at runtime and didn’t exist when the site was processed by Netlify’s build systems.

A possible indication of this is that the data-netlify="true" attribute is still there, and the documentation very clearly states that is removed when the form is processed:

See:
https://docs.netlify.com/forms/setup/#html-forms

So ultimately, it’s not as “static” as it first appears.

Netlify recently created this to provide a bit of an explanation as to why Forms doesn’t work seamlessly with Next.js

https://nextjs-platform-starter.netlify.app/classics

That page also links to this Next.js starter which has the example files:

https://github.com/netlify-templates/next-platform-starter/blob/main/public/__forms.html
https://github.com/netlify-templates/next-platform-starter/blob/main/components/feedback-form.jsx