How can I decently transfer props between my components?

Question

I want to provide a transfer of props between my two components dec. So when I want to go to my user component from my home page, I want to show the user's name. My app.js component:

<Link
   to={{
   pathname: "/user",
   query: { 
   name: user.name 
   }
   }}
   target="_blank"
   >                              
   Link
</Link>

---

export const getServerSideProps = async (context) => {
  console.log(context.query,"asdf");
  

  return {
    props: {
      name: context.query.name
    }
  };
};

I am trying to send the props in query to my user component using the getServerSideProps method.

my user jsx component :

import React from "react";
const User = (props) => {

  const {name} = props;
  return (
  <>
  <span>{props.name} </span>
  </>
  );
};
export default User;

My main and biggest problem here is not being unable to return. Because I can't see the object with the console log. How can I solve this problem?