How can I send a large data object to a different page using dynamic routing in Next.js without using query parameters?

When working on a page, I retrieve data and loop through it.

Within my mapping function, I render a card component with specific data:

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.

My goal is to pass the entire pokemon object to the page without relying on the next router query method due to the object's extensive data. Is there another solution available?

next.jsnext-router

Answer №1

To improve performance, consider caching the data using a global state management package like Redux or React Query, or utilizing the inbuilt Context API.

Alternatively,

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

Then, on the page:

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Warning in Next.js: When utilizing conditional rendering, the server HTML is expected to have a corresponding <div> inside another <div>

Although similar questions have been asked on various platforms like Google, none seem to provide answers that align with my specific situation. Essentially, my goal is to have a different search bar displayed in the header based on the page I am currentl ...

javascripthtmlreactjsnext.js

What is the rationale behind transmitting JSON data within HTML in Next.js's static site generation (

When a webpage is loading, the entire HTML document is sent, whereas in client-side routing, only the JSON file and JS chunk are sent. But why does the HTML file filled with data need to contain JSON data too? Is it really necessary since we already have ...

htmlnext.jsstatic-site-generation

Image broken despite accurate file path in next.js and tailwind

https://i.stack.imgur.com/2ZqPa.png In my components folder, specifically in navbar.js, I have a path to the image folder <img className="block lg:hidden h-8 w-auto" src='../images/logo_injoy.png' alt="Logo" /> U ...

htmlnext.js

When implementing variables from input boxes, my SQL query fails to populate any data in the database table

I have been using phpMyAdmin to store test data. As I try to insert data from a form, I encounter an issue where no data gets inserted when using variables in the SQL query. Being new to coding, I am struggling to find a solution to this problem. Additiona ...

javascripthtmlnext.js

The Parallax effect reference hook does not seem to be functioning properly with components in NextJs

I'm attempting to implement the useParallax hook on an element within my JavaScript file. My setup involves NextJs, ReactJs, and styled components. Here is how I integrated the hook: Mainland.js import React, { useEffect, useRef } from 'react&ap ...

htmlreactjsreact-hooksnext.jsuse-ref

Utilize the data storage API within Next.js or directly in the user's

Struggling to store this ini file on either the server or client, any help would be greatly appreciated. Additionally, I would like to display the ini info in the browser so that clients can easily copy and paste the information. However, I seem to be fac ...

javascripthtmlnode.jsapinext.js

How can I retrieve a text file using an API in a Next.js application?

Is there a way to download a text file using an API in Next.js? The console.log(ninjas) function is already displaying the correct information. I have tested the API with Postman and it works perfectly. When I use GET in Postman, the same information is ...

javascripthtmlnode.jsapinext.js

Images on NextJS are failing to resize properly in Next 13

I have been facing challenges with optimizing image sizes for different screen resolutions using the NextJS Image component. Currently, all images seem to be loading at their largest size on various screens. Below is a screenshot showing the resolution t ...

htmlreactjsnext.jsnext.js13nextjs-image

What is the best way to convert my Chatbot component into a <script> tag for seamless integration into any website using React.js?

I have successfully integrated a Chatbot component into my Next.js application. https://i.stack.imgur.com/BxgWV.png Now, I want to make this component available for anyone to use on their own website by simply adding a tag. My initial approach was to cre ...

javascripthtmlreactjswebpacknext.js

Effective Ways to Redirect During or After Executing the onClick Function of Button

I am currently working on implementing a feature for my Next.js website. The functionality involves allowing users to create a new group by clicking a button, and then being redirected to an "Invite members" page with the auto-generated group_id included i ...

javascripthtmlreactjshttp-redirectnext.js

What is the best way to reset form after submission in Next.js?

I have a contact form and I want all the form values to be cleared after submitting the form. I've tried the following code, but the values of the form remain unchanged after submission. What could be causing this issue and how can it be resolved? ...

javascripthtmlreactjsnext.js

A problem arose with Vitest when attempting to call the tRPC createCaller function due to the presence of incorrect JS syntax within the content. To resolve this issue, it is recommended to include

Currently, I am in the process of writing unit tests with Vitest and utilizing the tRPC createCaller to simulate the trpc context. However, I am encountering a failure during testing which presents the following error message: Error: Failed to parse sourc ...

htmlnext.jsmockingvitesttrpc

When I engage with the input field, it ceases to be in focus

Here is the code I've been working on: https://github.com/Michael-Liendo/url-shortener/blob/main/src/pages/index.js If you want to see the issue for yourself, check it out at: ...

javascripthtmlreactjsnext.js