I'm starting with NextJS and React. I've developed a page A where I retrieve data (a JSON object) from an API (using getServerSideProps() to do it in each request time) and then I show it. Then, I've some IconButtons to push and go to another page B. That's working ok. Then, which is the right way to send that JSON object to the page B to show some elements?

The code I've done is something like this:

Page A:

```
import React from "react";
import Head from "next/head";
import { params } from "../components/ApiParams";
import fetch from "node-fetch";

const Chapter = ({ response }) => {
  return (
    <div>
      <Head>
        <title>Chapter</title>
      </Head>

      <div>
      {response.data.mainValue}
      <IconButton href="/chapters/secondPage">
                <ChevronRightIcon />
      </IconButton>
      </div>
    </div>
  );
};

const getFetch = async (params) => {
  const chapterUrl = `https://localhost/chapter/data-provider`;
  const response = fetch(chapterUrl, params);
  return response;
};

export const getServerSideProps = async (context) => {
  try {
    const res = await getFetch(params);
    const response = await res.json();
    return { props: { response } };
  } catch (error) {
    console.log("Error in getServerSideProps function: ", error);
  }
};

export default Chapter;

```

Page B:

```
import React from "react";
import Head from "next/head";

export default function secondPage(){
   return(
          //Here I want use the response object I've got from API in Page A.
);
}

```

So, how is the right way to send that response object to Page B? Thanks in advance.