How to pass data from one page to another page while redirecting from getServersidePros

So you are also trying to figure out how to pass data from one to another while redirecting from getServerSideProps in NextJs?
Then you are at the right place.

Before moving on to the solution let's discuss the problem here and what are we trying to do here.
NextJs let us render our pages on the server-side and give us pre-rendered HTML for our pages(Server-side Rendering) and that's a very important feature when it comes to precomputing and doing some operation on the server side before sending HTML to the client.

But now the main problem is that while doing something serverside you don’t have access to LocalStorage or SessionStorage. why?

Because these storage APIs are provided by the browser and when we are on the server side we don’t have access to these APIs, but why are we talking about LocalStorage and SessionStorage here?
Because LocalStorage or SessionStorage is the first solution that comes to our mind when we think about passing some data on the same website from one page to another, but when it's NextJs and we are using getServerSideProps we don’t have access to this storage and thus we can’t use them for a solution.

So, now what to do?
One more solution that comes to our mind is to pass data as a query parameter, so while creating the URL for the second page you can just add some key values and then get the data from the query when the second page is rendered.
Very Simple solution right, but there are many cases where you don’t want to show all that data to the user and you don’t want to have that data in the URL.

So how do we solve this problem?

Cookies, yes using cookies can solve this problem. Let's just jump into the code now.

export const getServerSideProps = async ({ params, query, req, res }: any) => {
return {
redirect: {
permanent: false,
destination: redirectionPath,
message: 'Hello',
},
};
};

Now from the above example, I want to pass the message to the redirected page, but the problem is you won’t receive the message on the next page.
So now we will add cookies.
Before that, you need to install a module.

npm i cookies

Now you can use this module to add/get data to/from cookies.

export const getServerSideProps = async ({ params, query, req, res }: any) => {
const cookies = new Cookies(req, res);
const redirectionPath = `/same-page?eventId=${differentId}`;
const responseMessage = "Hello second page";
cookies.set('message', responseMessage, {
httpOnly: true,
});
return {
redirect: {
permanent: false,
destination: redirectionPath,
},
};
};

Now you have added message data to cookies and you can get this data on the second page from cookies, how? here is a snippet

Second page
export const getServerSideProps = async ({ params, query, req, res }: any) => {
const cookies = new Cookies(req, res);
const message = cookies.get('message');
// use this message to perform some operation
// let's say you want to delete this after one use, means that after second page loads one the data should be removed and on reload we should not get the message from cookies.
// code to remove the data from cookies, and this will make sure after first load your message is removed from the cookies
if (message) {
// this will remove the property from the cookies
cookies.set('message');
}
};

And that's how you play around with data on the server-side using cookies.

I hope this would have helped someone, as I was also searching for the solution to this problem a few weeks ago.

Keep learning and Growing.

Follow for more such posts.