How to pass a big data object to another page with dynamic route in next js (without query params)?

Question

I have a page where I fetch data and map through it.

In my map function I display a card component with some data like this:

pokemonsList?.map((pokemon, index) => {
                return (
                  <Link href={`/pokemon/${pokemon.id}`} key={index}>
                    <a>
                      <Card pokemon={pokemon} />
                    </a>
                  </Link>
                );
              }

As you can see, the route is dynamic.

What I would like to do is to pass the whole pokemon object to the page. I would like to achieve this without using the next router query method, because the object contains a lot of data.

Is there an other way ?

Answer 1

You could cache it, either by using some global state management package (Redux, React Query) or inbuilt Context API.

Or

   <Link 
      href={{
         pathname: '/pokemon',
         query: {
            id: pokemon.id,
            pokemon: JSON.stringify(pokemon) 
         }
      }}
      as={`/pokemon/${pokemon.id}`}
      key={index}>
      <a>
         <Card pokemon={pokemon} />
      </a>
   </Link>

And then on the page

const { query } = useRouter();
const pokemon = JSON.parse(query.pokemon);