Hydrogen React with NextJS example project

[jnovak-SM2Dev]

Is there an example project on how to use Hydrogen React with NextJS or a similar framework? The docs just say there are components and hooks, but do not show how to use them properly, and half the docs just link to readme's that link back to the same underdeveloped docs.

Some general questions an example could help answer.

1. What is the nesting structure that needs to happens for components to work? (For example it seems I need to nest a AddToCartButton in a CartProvider, but does CartProvider need to be nested under anything like a ShopifyProvider?)
2. Is there anything special that has to be done to get the providers/components to work with SSR? I'm getting hydration issues using providers.
3. How do I use createStorefrontClient with ShopifyProvider? Do I need both, just one, or how does that work?

[blittle]

Hi @SM2DevLLC, here is a NextJS example, though it might be slightly out of date. Let me know if you still have questions.

[jnovak-SM2Dev]

@blittle Thanks! That is super helpful, it should probably be added to the docs/ReadMe. I'd love to see a more updated one at some point that uses more of the components/providers. This library is super helpful, so i'd like to see more people using it.

[blittle]

Yeah, we didn't move it over from the v-1 repo because we aren't sure we have time to maintain it with regular updates with NextJS. I hope that will change in the future.

[jnovak-SM2Dev]

Yeah I think just linking that repo and saying it's outdated would help. The issue is the docs just show a bunch of elements, but it's hard to tell how they work together unless you look through each one/try each one to find it's requirements.

[nezhachen]

I already created nextjs app.
I wanna integrate hydrogen react to my existing project.
Is there any instructions who I should follow?

[jamalsoueidan]

Follow the documentation how to make the integration.
https://shopify.dev/docs/storefronts/headless/hydrogen/getting-started

Click on the different subjects and you get an idea how to make the integration.