I have a next js project where I have a form using which I fetch some data from backend and display to the user. The displayed data is in the form of a table and the user can click on the table row to go to the detail page.

But when the user presses browser back fro the detail page, it comes to the previous page but the user values in the input are gone.

I checked why that is happening and I realised that since the page to fetch the data was a client component, it is getting re rendered when navigated back to, which is resetting the state.

I assumed that since only the current page is being removed from the browser stack the page behind it should just exist and not re-render.

So can I somehow prevent this behaviour or do I need to somehow use the url to send the previous form data back as it needs to be populated with the values that were already entered before pushing in the detail page on top?

Also for extra information all the pages being rendered are using optional catch segment, but I verified this behaviour using separate routes as well

I have a next js project where I have a form using which I fetch some data from backend and display to the user. The displayed data is in the form of a table and the user can click on the table row to go to the detail page.

But when the user presses browser back fro the detail page, it comes to the previous page but the user values in the input are gone.

I checked why that is happening and I realised that since the page to fetch the data was a client component, it is getting re rendered when navigated back to, which is resetting the state.

I assumed that since only the current page is being removed from the browser stack the page behind it should just exist and not re-render.

So can I somehow prevent this behaviour or do I need to somehow use the url to send the previous form data back as it needs to be populated with the values that were already entered before pushing in the detail page on top?

Also for extra information all the pages being rendered are using optional catch segment, but I verified this behaviour using separate routes as well

• javascript
• reactjs
• next.js
• nextjs-dynamic-routing

2 Answers 2

The issue arises because in Next.js, when navigating between pages, the component state is reset unless you preserve the data or the state across the page transitions. Here are a couple of ways to fix this.

const handleSubmit = (e) => {
  e.preventDefault();
  router.push(`/details?input1=${input1}&input2=${input2}`);
}

const { input1, input2 } = useRouter().query;

You can use layouts.

"A layout is UI that is shared between multiple pages. On navigation, layouts preserve state, remain interactive, and do not rerender.

You can define a layout by default exporting a React component from a layout file. The component should accept a children prop which can be a page or another layout."

https://nextjs./docs/app/getting-started/layouts-and-pages