Integrate with other React frameworks
The majority of Hydrogen components accept data from the Storefront API and render just like regular React components. This means you can use Hydrogen components in other React frameworks like Next.js or Gatsby.
Shopify hasn't optimized integrating with other frameworks for the developer preview, so you need to follow some special instructions to make it work. While the instructions in this guide are specific Next.js, you can follow a similar pattern to support other frameworks.
Get started with Next.js
Anchor link to section titled "Get started with Next.js"In your Next.js app, install Hydrogen and
next-transpile-modules:Instruct Next.js to compile
@shopify/hydrogenfrom ESM (ES Modules) to CJS (CommonJS) by editing yournext.config.jsfile:
Fetch data in Next.js
Anchor link to section titled "Fetch data in Next.js"Shopify recommends calling the Storefront API on the server. Hydrogen will soon introduce a mechanism to make server-to-server calls without exhausting rate limits, so it's best to structure your apps this way from the start.
The following example shows the general structure of a product page in Next.js. For more information, refer to the Hydrogen components in Next.js GitHub discussion.
Limitations
Anchor link to section titled "Limitations"The following limitations apply when using Hydrogen components in Next.js.
You can't use useShopQuery in Next.js
Anchor link to section titled "You can't use useShopQuery in Next.js"You can't use useShopQuery in Next.js because it's a hook that is meant to be run in Hydrogen's server components. Since the stable version of Next.js doesn't allow you to render a component only on the server, you need to fetch data in a getStaticProps or getServerSideProps function instead.
You can't use server components in Next.js
Anchor link to section titled "You can't use server components in Next.js"Hydrogen is currently using a modified version of server components which supports context and SSR (server-side rendering). This isn't yet supported in the version of server components that Next.js uses.
If you want to use the Alpha version of server components in Next.js, then you need to wrap any Hydrogen component that use Context in *.client.js components. This is the only way to currently use context in Next.js server components.