The options here mention mostly passing of a simple data, some (comments) mentioned using context. But you do not always want to pass simple data and using context for this is, in my opinion, not an ideal solution¹.

If your use case is similar to mine - you want to avoid refetching data that had already been fetched by parent component - I found out that the best solution for me is using the SWR library (it was created by Next.js developers).

You can even find it mentioned in the official Next.js docs here.

If you haven't heard of it

Basically it's a client-side cache that manages key-value pairs, where keys are URLs you fetched and values are the data returned by this fetch. If you then try to refetch the same URL, it will (practically immediatelly) return the cached response.

So in our scenario, you fetch the data in the parent component, and then can fetch as many times as you want in other (bonus: not limited to child) components, basically working as using data from context.

¹ Mostly because I find it annoying to specify context everywhere I want to use this logic, but also my spidey-sense is tingling, there are gonna be more gotchas.