0

Handling forms and form data with NextJS App Routing.

I have a page that has a simple form with two fields. I use the action and method attributes of the form element. Let's call the first page page1 and the other page page2.

I load page1 in the browser with its form element and all is well. The action attribute has the value of "/page2" and the method has the value of "POST".

My question is simply how do I retrieve this value on the server so I can display them in page2 and and get page2 to render on the client side using NextJS as a full-stack framework with App Routing?

I figured out how to do it with Page Routing, finally but that is not pretty. I was hoping to use the new App Routing instead but there is absolutely no documentation about how to do something simple as this. I'd appreciate some help on this and also how you migrate from getServerSidePops() in Pages routing to App routing where getServerSidePages no longer exists, what are you supposed to use instead? Unfortunately the documentation doesn't cover any of this from what I can make out after a few days of trying to read through it.

Chris J.
  • 1
  • 1
  • Can you provide a reproductible example of what you already have ? – ZecKa May 09 '23 at 09:30
  • It's more about the principles involved and how it is intended to work. The documentation doesn't provide any information. When it comes to how to receive it on the server side I just don't know with the App Routing and that is what I am wondering. I can't provide any code on that since that is exactly what I am asking about, how do you handle a simple POST request from a form on the server side. The client side code is just a simple HTML form with attributes action="/page2" and method="POST". – Chris J. May 09 '23 at 11:39
  • The documentation doesn't provide any information about it because a React application is not suppose to perform POST request to another page, if you do that you will perform a fullpage reload and this is exactly what we want to avoid on a React application. A Next.js application should not be thinked as a PHP/HTML website. To achieve your goal there is multiple way. You can use url query parameter || stock form data in a globalContext or store (like Zustand, Redux) || store form data in sessionStorage || ... – ZecKa May 09 '23 at 14:36
  • OK Thanks ZecKa. I believe some of my problems may stem from that I am used to think in terms of server and client. – Chris J. May 11 '23 at 08:15

0 Answers0