Mental model to transfer data between pages

[robertwt7]

Hey Guys,

Its my first time using Next js today at work so please be kind. Previously we have used react for a while now (CRA with Laravel backend) and it has worked awesome. I think since I've been working with CRA and its environment for a while I just don't feel that I'm getting a right mental model so I want to ask you guys a question

Use case (note that I have convert everything to use functional component so I use hooks, a lot):
I want to create a small booking system, consist of 3 page

1. Select date page, implemented with dayjs and material ui picker -> manage to transfer data to second page using next/router and passed the date param using query
2. Select multiple slots available in the table. Here, everytime user selected a block in the row and columns I updated local state booked. Structure goes like this:

booked = {
 time1: { slotsBooked: 2},
 time2: { slotsBooked: 4},
 ...
}

3. Once confirmed, i need to transfer them to third page which consist of form to fill out details where I would send all the data from previous pages through the API.

Now I'm having a hard time transferring object to the page 3. How would you guys do that here? What is the best practice?

In react router dom I would have use history.push({pathname: "mypath", state: { booked } }) because it supports sending objects.

I have explored a couple of ideas here, either save the data in redux with this package. But it doesn't seem like it is a good practice and natural with next workflow? Not sure. Or probably should I use the API Routes? How would I use it in my use case then if I would have use API routes

Can anyone please help, i'm really confused and new here..

Cheers guys