How to create reusable components in Next.js

I am not sure if I am missing something within the Next.js documentation, but it seems as if it is unfeasible to reuse components within a Next.js application without breaking the component.

So from my understanding:

• Next.js uses SSR to fetch data at a pages level by either getStaticProps, getStaticPaths or getServerSideProps.
• Once this data has been fetched it is returned to the page via props.
• The page then has access to the props and can then handle this data however it wants.
• In order to use the SSR techniques for child components of our page we have to grab the child components data at page level and then pass this data down to our components.

This raises some concerns for me and questions:

• This means our children components always have a dependency on the parent page?
• We can't reuse our components on other pages without repeating logic or breaking components?
• How do I reuse components without client side rendering?
• Could I just grab everything at the entry point of the app and then store this in various state variables using Redux and call them at component level when needed?

By using client side rendering it sort of defeats the purpose of using Next.js. Yes, I can just use a useEffect hook to grab the data at component level but this doesn't seem right to me.

Am I missing something in the architectural pattern or is this just a vulnerability when working with Next.js?

The more I think about this the more I realise Relay and GraphQL are the future.