Nextjs pass a JSON to another page

Question

Good afternoon! I’m having a question and I even managed to do it via Route.Push() but all the data is displayed in the URL of the next page.

An example:

• I have a Login page where I pass a CPF/CNPJ and the Client Code.
• When entering the data I consult an API and in case of success it returns me a JSON with all the data of that client I need. (I had to use JSON.Stringfy() to work)

Sending of Data

fetch(
'http://xxx.xxx.xxx.xxx:xxxx/rest/ponto_facil/cliente?doccliente=${values.documento}&codcliente=${values.codigo}'
    )
    .then(result => result.json())
    .then(json => {
      router.push({
        pathname: "/dashboard",
        query: { cliente: JSON.stringify(json.cliente) },
      });      
    })

I would like to "take" this JSON to the next page and use it. I got only via URL and besides polluted the customer can not give a refresh that mistakes happen.

Receiving on Other Page

const router = useRouter();
  const {
    query: { cliente },
  } = router;

  const dados = JSON.parse(cliente);

I can use the DATA array to create the page but all content is in the URL

Is there any way to pass content not using the Router QUERY and pass the object?

I appreciate the help!

Answer 1

In this scenario the best solution is using the context, within your context you will create a state that will store the result of your request and on the next page you will only need to access this state.

Documentation in Portuguese explaining the context in more detail