How to pass data between components with next.js?

Question

I have a next js project and I want to pass data between components. This is my data:

 const data = {
    eventName: "FIVB Volleyball Women's World Championship ",
    eventDate: "13-09-2022 / 20-09-2022",
    eventLocation: [
          {
            place: "Arnhem",
            city: "GelreDome",
          },
          {
            place: "Ahoy arena",
            city: "Rotterdam",
          },
          {
            place: "Omnisport",
            city: "Appeldoorn",
          },
        ], 

I am sending the data to the detail component with Link.

<Link href={{
            pathname: "/Detail",
            query: props.data,
          }}>
          <button>
            Details
          </button>
        </Link> 

And This is how I show the data given on the detail page.

 const router = useRouter();
  const data = router.query;
  console.log(data);

  return (
    <div>
      <div className={styles.container}>
        <h1 className="text-4xl mt-3">{data.eventName}</h1>
        <h3 className="text-xl mt-3">{data.eventDate}</h3>
       {data.eventLocation.map((item) => {
          return (
            <div key={item.place}>
              <h3 className="text-xl mt-3">
                {item.place},{item.city}
              </h3>
            </div>
          );
        })}
      </div>
  );
};

I currently cannot see the elements in the event location array. Also, the address of the page contains all the data I sent. Is there any other way I can send this data or is there something I need to fix here?

Answer 1

Query is used to pass some short (usually) data in link, I would suggest to change approach of getting information. On detail page prefetch data by (for example) id of event (get id form router.query). Another approach is to store all information in redux/react context.