Next.js WooCommerce

Next.js WooCommerce is a headless eCommerce starter kit that pairs a Next.js storefront with a WordPress/WooCommerce backend through WPGraphQL, giving developers a complete cart-to-checkout flow out of the box. Built by GitHub user w3bdesign, the repository ships a fully typed React application with TypeScript, a Zustand-managed persistent cart, and Algolia-powered search. The live demo runs at https://next-woocommerce.dfweb.no. Inputs are WooCommerce products exposed through the WPGraphQL schema; outputs are product listing pages, category pages, a cart, and a Cash on Delivery checkout form.

What is Next.js WooCommerce?

Next.js WooCommerce is a publicly available GitHub repository that replaces the WordPress frontend with a Next.js React application. It reads products, categories, and cart data from WooCommerce through the wp-graphql and wp-graphql-woocommerce plugins, and it returns a responsive storefront with product listings, filtering, a shopping cart, and checkout. The project is built and maintained by w3bdesign, and the current release is tested with WordPress 7.0.2, WooCommerce 10.9.4, WP GraphQL 2.18.0, and WooGraphQL 1.0.3.

Key Features

• Headless architecture — Next.js 16.1.6 with React 19.2.4 renders the storefront, while WordPress runs only as a backend. The optional headless-wordpress plugin disables the WordPress frontend entirely.
• GraphQL data layer — Apollo Client queries the WPGraphQL schema exposed by WooGraphQL to fetch product name, price, images, and stock status for both simple and variable products.
• Cart and checkout — Zustand manages global cart state with localStorage persistence and selective subscriptions for efficient updates. Cash on Delivery is the only payment method implemented.
• Algolia search — Search requires the custom wp-algolia-woo-indexer WordPress plugin, which sends WooCommerce products to Algolia and is listed under the repository's required plugins.
• Product filtering — Color, size, price range slider, product type, and sorting options (popularity, price, newest) are included, with a mobile-optimized layout and accessible ARIA-labeled controls.
• Design system — A custom Tailwind CSS configuration defines a muted slate-blue palette with warm neutral surfaces. Design tokens are exposed as Tailwind utilities and CSS custom properties in globals.css, including primary #3B6B8A, accent #4A8F8F, and error #B83B2A.
• Quality automation — Playwright tests, Lighthouse CI with score thresholds on every pull request, and an OWASP security workflow using gitleaks, Semgrep, and Trivy run through GitHub Actions.
• Accessibility — Global focus-visible rings, prefers-reduced-motion support, inline form errors with role="alert", and semantic HTML throughout.

Who is it for?

Next.js WooCommerce is aimed at developers who want a working reference for connecting Next.js to WooCommerce via GraphQL. React developers can use it to study state management with Zustand and data fetching with Apollo in a real ecommerce flow. Agencies building custom WooCommerce storefronts can fork it to avoid the initial wiring of plugins, environment variables, and cart logic. WordPress developers who want to use WordPress as a headless CMS while keeping WooCommerce as the product backend will also find it useful.

What can you do with it?

• Storefront builders: set up a product catalog with category pages, stock status, image placeholders, and pretty URLs using Next.js built-in routing.
• Checkout implementers: enable WooCommerce's Cash on Delivery method, add products to the cart, and complete an order through the Norwegian-language checkout flow labeled "Gå til kasse".
• Designers: restyle the entire store by editing Tailwind design tokens — primary, accent, surface, border, and text colors are defined in one config file and mirrored as CSS custom properties.
• DevOps-minded developers: reuse the GitHub Actions workflows for Lighthouse performance monitoring and OWASP security scanning (secret detection, SAST, and dependency CVE checks) on other projects.

How does Next.js WooCommerce work?

The setup follows a clear path: install required WordPress plugins (woocommerce, wp-graphql, wp-graphql-woocommerce, and wp-algolia-woo-indexer), clone the repository, rename .env.example to .env and set environment variables, then start the dev server with pnpm run dev. Product data flows from WooCommerce through WPGraphQL to Apollo Client, and the cart is persisted in the browser via Zustand with localStorage sync. The README also lists a troubleshooting step: verify wp-graphql-woocommerce is up to date if cart undefined GraphQL errors appear.

FAQ

What payment methods are supported?

Only Cash on Delivery (COD) is currently supported. The README notes that more payment methods may be added later. To use the checkout, enable COD in WooCommerce before placing a test order.

Which WooCommerce product types work?

Only simple and variable products work without issues. Other product types are not known to work, so the repository is best used with catalogs that rely on those two product types.

Is this template production-ready?

The README states that the application works as intended but has not been tested extensively in a production environment; more testing and debugging are needed before deployment. The TODO list includes additions like a user dashboard, Cloudflare Turnstile on registration, and hiding out-of-stock products.

What is the tested WordPress version stack?

The current release is confirmed working with WordPress 7.0.2, WooCommerce 10.9.4, WP GraphQL 2.18.0, WooGraphQL 1.0.3, and WPGraphQL CORS 2.1. The frontend uses Next.js 16.1.6 and React 19.2.4.

Does search work without extra plugins?

No. Algolia search requires the wp-algolia-woo-indexer WordPress plugin created by w3bdesign, which sends WooCommerce products to Algolia. Without that plugin, the search feature will not function.