Next-Shop

Next-Shop is an open-source e-commerce storefront template built on Next.js that demonstrates a production-oriented headless commerce architecture using Hygraph CMS, GraphQL, Stripe payments, and a database-backed shopping cart.

What is Next-Shop?

Next-Shop is a full storefront starter built with the Next.js App Router, server components, server actions, and HTTP streaming. It fetches product data from Hygraph CMS through GraphQL and processes payments via Stripe, producing a complete catalog, cart, and checkout experience. The project is available as a public GitHub repository with a live demo deployed to Vercel.

Key Features

• Database-backed shopping cart — Cart contents persist in a database, giving store owners the ability to analyze shoppers' choices, including abandoned carts.
• Optimistic cart quantity updates — Quantity changes appear instantly in the UI while server actions save them in the background, removing the need to wait on server round-trips.
• Automatically generated OG images — Each product gets a social-sharing image generated at runtime through a Next.js API route, improving SEO and link previews.
• Product search form — A headless search form lets customers quickly find products across the catalog.
• Responsive, mobile-first layout — The UI is styled with Tailwind CSS and adapts to user theme preferences, including colors and animations.
• HTTP streaming with Suspense — Pages stream content progressively from the server, letting visitors interact with parts of the page while the rest loads in the background.
• Server actions for mutations — Cart modifications run through Next.js server actions instead of custom API endpoints, simplifying data handling.
• Type-safe GraphQL queries — GraphQL Code Generator produces fully typed queries from the Hygraph schema, catching type errors at compile time.
• Automatic expired-cart cleanup — Vercel Cron schedules the removal of stale carts from the database.
• Stripe payment integration — Checkout is handled through the Stripe payment provider with no need for a separate payment server.

Who is it for?

Web developers building headless e-commerce stores with Next.js can use Next-Shop as a reference for combining server components, server actions, streaming, and optimistic UI in one codebase. Freelancers and agencies can fork the repository to deliver a customized storefront to clients who need CMS-managed products and Stripe checkout. Store owners can launch a modern store using Hygraph's dashboard to manage products and rely on the database-backed cart for conversion analytics.

Use cases

• E-commerce developers: Study a working example of the Next.js App Router with intercepting and parallel routes, server actions, and streamed data fetching.
• Shop owners: Set up a storefront that displays products from Hygraph CMS, lets customers search, and processes payments through Stripe.
• Educators and students: Use Next-Shop as a real-world case study of a type-safe GraphQL workflow with code generation and end-to-end payment integration.

How does Next-Shop work?

Next-Shop fetches product and category data from Hygraph CMS via GraphQL directly inside server components. Product pages and category archives render on the server and stream to the client using Suspense. When a shopper changes cart quantity or adds an item, a Next.js server action handles the database mutation with optimistic UI updates, and Stripe handles payment when the checkout flow is triggered.

Pros and cons

• Pros: Utilizes the latest Next.js data-fetching and mutation patterns; includes a database-backed cart for analytics; generated OG images improve SEO; fully type-safe GraphQL queries; Stripe integration built in.
• Cons: Intercepted and parallel cart routes are currently disabled because of unresolved Next.js bugs; Storybook documentation is outdated and not maintained; unit and E2E tests are not yet written (they are listed as future work).

FAQ

Does Next-Shop use Hygraph CMS?

Yes, Next-Shop fetches product and category content from Hygraph CMS using GraphQL. The README lists Hygraph as the content source, and the project uses GraphQL Code Generator to create type-safe queries from the Hygraph schema.

Does Next-Shop support Stripe payments?

Yes, the template includes an integration with the Stripe payment provider. Checkout is processed through Stripe, while the cart itself is stored in a database.

Can I see Next-Shop live?

Yes, a live demo is deployed at https://next-shop-gp.vercel.app/. There is also a Storybook documentation site at https://next-shop-gp-storybook.vercel.app/, though the README notes it is outdated and no longer maintained.

Is Next-Shop production-ready?

It is positioned as a "modern storefront" and includes several production-oriented features like server actions, streaming, optimistic cart updates, and Vercel Cron cleanup. However, the repository's to-do list indicates that unit tests, E2E tests, internationalization, and a contact form are still missing, so it should be evaluated against your specific requirements.

What Next.js features does Next-Shop demonstrate?

The project uses the App Router, server components, server actions, intercepting and parallel routes (cart currently disabled due to bugs), HTTP streaming with Suspense, and API routes for generating OG images.