How do build a top component wrapper in next.js?

So I’m getting this error: Invariant Violation: Could not find "client" in the context or passed in as an option

And the reason is because my component is not wrapped in ApolloProvider

So at my home page I have:

export default function Home() {
  return (
    <ApolloProvider client={client}>
      <Products />
    </ApolloProvider>
  );
}

and this works fine, I make a query inside <Products /> all good

but I have a pages/product/[id].js page and this is where the issue is and it blows up here and I believe because this page lives outside of the component tree

historically (in CRA) the index entry point would render every thing but beneath but I can’t see this concept in next.js

Surely the solution is not to wrap every subsequent page in <ApolloProvider client={client}> so how can I fix this, what is the correct next.js solution to this?