I am building a website with Next.js and can’t seem to make the Netlify Forms to work.
This is my website: https://skala-site.netlify.app. I used Netlify Forms before and it always worked OK, so I am really not sure what I am doing wrong right now.
I also have a GitHub Gist of my code, if anyone notices that I made some mistake there, which is causing Netlify Forms to not work. I have some console.logs in the code, which all seem to work as expected, the only issue is that the submissions don’t arrive in Netlify.
Thank you for your help in advance.
I have done some more testing with Chrome dev tools and noticed that the POST request that is sent, when you submit the form, has a 301 Status Code. But I still don’t know how to fix this issue.
I don’t have any redirect rules defined, however I did find a fix that seems to solve my issue.
In my handleSubmit function I changed the first parameter of my fetch function so that it also includes the currently active locale.
to this (the locale comes from using the Next.js useRouter() hook).
Now the form is working as expected and the form submissions are processed by Netlify. However I still don’t really understand what the issue was. I already built one website with Next.js that also included i18n and the form worked there without any issues. Another thing that I noticed while debugging the issue, was that the form actually worked while accessing the website with Microsoft Edge browser, even before this fix was applied. But on Chrome and Firefox, the form only started working after the above mentioned fix was applied.
So my problem has been solved, but if anyone has any idea what might have caused this issue, I would be interested in hearing it.
We can see there’s a redirect that redirects your site from / to /en. If that’s not you adding the redirect, it’s probably the plugin adding that redirect. The plugin usually configures the redirects based on how your site works and needs it, so if it’s doing that, your site most likely needs it.
Also, you can take a look at the first point under this heading:
It mentions that you need to post to an endpoint that doesn’t get redirects (in your case /en). This is why it now works.