// the find
VienDinhCom/next-shopify-storefront
A modern Shopping Cart built with ESMate, Next.js, React.js, ShadCN, ESLint, Prettier, GraphQL, and Shopify Hydrogen.
A Next.js starter kit for building headless Shopify storefronts using the Storefront GraphQL API, Hydrogen React, and ShadCN components. Targets developers who want a pre-configured baseline for a custom Shopify frontend without starting from scratch. Has been maintained across multiple versions since 2019.
- GraphQL Codegen is properly wired up (codegen.config.ts present, generated types in src/lib/graphql), so Shopify API responses are fully typed end-to-end—no manual interface maintenance.
- Uses Hydrogen React for cart state rather than rolling a custom solution, which gets you Shopify's cart logic (line item management, discount codes) without the maintenance burden.
- Tooling is actually configured and usable out of the box: ESLint, Prettier, Vitest, and VSCode settings are all present, not just listed in a badge.
- ISR and SSR are both used appropriately—product pages use server components and static generation, which is the right call for a storefront.
- The codebase is tiny (a handful of routes, one hook with a test). It covers products list, product detail, and cart—that's it. No search, collections, account, checkout redirect, or pagination. Real stores will need substantially more work.
- All Shopify credentials are NEXT_PUBLIC_, meaning the Storefront API token ships to the browser. This is technically supported by Shopify's public token model, but it's worth knowing there's no server-side API proxy protecting rate limits or hiding token rotation.
- There are essentially no tests—one unit test for use-variant-selector. No integration or E2E coverage means you're on your own validating cart and checkout flows after customization.
- ESMate is a first-party dependency that's not widely adopted outside this author's projects. If it breaks or stagnates, you inherit that problem; it adds an abstraction layer over standard tooling without obvious payoff.