Best practices for dynamic data page-related

[Vadorequest]

I'm wondering if there are best practices or experience feedback regarding how to handle data that are specific per-page, compared to data that are common to all pages.

Obviously, in any Next.js app, there are props shared across all pages (through getInitialProps, getStaticProps and getServerSideProps). Those data live in props.pageProps in _app.render.

Now, I have some data that are dynamic (fetched from an API/DB) and page-specific, such as:

• All pages have a props.pageProps.customer object (needed in shared part of the app like head/footer)
• Some pages have a props.pageProps.products array (display products)

Right now, those data live in props.pageProps directly, but I wonder if some rules shouldn't be enforced, and if they shouldn't be rather available under props.pageProps.data/pageData ("data" feels too-wide of a term, "pageData" feels somehow redundant)

My concerns are:

• Props name collision (multiple pages using the same variable name with different meaning, could potentially cause havoc if those props are used by shared components)
• Regression (some page using "x" props, then someone adds a new common variable to all pages named "x" and overrides the old "x" on that specific page)
• Clarity (needs to be obvious, no-brainer)

Did you encounter those situations? How do you recommend to go about that?