Best way to pass props to a sibling component-CodePudding

I'm implementing a project with Next.js and I've been trying to find out the best way I could achieve the following.

I have a page /home that calls an API with getServerSideProps and receives information that is printed to the page in multiple of this components:

function PlaylistItem({playlistName,id,description,background} : { playlistName : string, id : string, description : string, background : string}) {
return (
    <a className='flex-col justify-center flex text-center items-center cursor-pointer mb-6' href='/difficulty'>
        <div className=' w-[100px] h-[100px] rounded-full' style={{backgroundImage: `url(${background})`,backgroundPosition:"center",backgroundSize:"cover"}}></div>
        <p className='mt-2'>{playlistName}</p>
    </a>

)
}

 export default PlaylistItem

Depending on which of those components the user clicks, I want to pass the props (id, playlistName, etc) to the next page stated in the anchor tag.

I saw that I could achieve that with dynamic routes and passing the values as queries, but is it really the best way I could to this?

CodePudding user response：

The ideal way to accomplish this is by using dynamic routes, also utilise cookies to save and get into the next page if you don't require share url capability for next page.

CodePudding user response：

dynamic routes the only one way to achieve this