Netlify forms, Next.js and getStaticPaths

Hey fellow devs, I hope you can give me a hand with this one.

Im building a multilingual Next.js site (magnayachts.netlify.app )and I’m having some issues setting up my Netlify forms. I have two forms on the site. The first one in the Contact page is working just fine, I can receive submissions and the success message is shown correctly. Contact is a static page, and my form has these settings:

name="ContactForm"
id="ContactForm"
method="POST"
data-netlify="true"
netlify-honeypot="bot-field"
action={'/' + locale + '/' + 'contact?success=true'}

You can see that my action is using a locale variable. This one is coming from the useRouter hook since I need to know in which language the user is in. The ?success=true is a simple URL param to conditionally show a message. In fact, you can go directly to contact?success=true and you’ll see the message.

However, I run into some issues with my second form, which is used in pages generated via getStaticPaths. The content is coming from a Sanity backend. If you go and select any yacht from the Second Hands page, you’ll be able to see it on the sidebar. Upon submission I receive a method not allowed error. The form config is very similar, but since the page is dynamic [pageId].js I had to try every combination of router.locale router.asPath router.pathname + the ?success=true URL param for the action value. Nothing seems to be working.

What would be the best way to deal with this? Bear with me, this is my first full-on jamstack project.

I’ll appreciate any input. Thanks!

Hey there, @guillermo-avalos :wave:

Thanks so much for reaching out about this, and welcome to the Netlify Forums!

Can you please share your project repo for this site? If that is private, do you have a reproduction we could look at? This will help us look into this further for you.

Hi @hillary! thank you for the quick reply. Unfortunately this is client work and the repo must be private, but I can copy and paste the code for that particular page and remove everything not critical.

The problem is reproducible with any dynamic route in Next.js ([pageName.js]). When the form action is set to point to itself, the error occurs. I believe it might be caused by the order in which the Netlify bot parses the code, if it does it before Next compiles and create all possible routes with getStaticPaths or after. If it’s before, then the page name doesn’t really exists yet.

hi guillermo, please do share a repo if you can - critical info only is fine. thanks!