NextJS-Store

NextJS-Store is a Next.js boilerplate template for ecommerce that jumpstarts storefront development by connecting WordPress and WooCommerce through GraphQL (WPGraphQL) and Apollo Client.

What is NextJS-Store?

NextJS-Store is an open-source boilerplate created by Big O Soft LLC that pairs a Next.js frontend with WordPress and WooCommerce as the backend. It uses GraphQL via WPGraphQL and Apollo Client for data fetching, and the WooCommerce REST API for store operations. As input, the template takes a .env.local file containing WooCommerce credentials; as output, it produces a scaffolded Next.js application with pages, components, layouts, styles, and typed Apollo queries ready for development.

Key Features

• Scalable architecture — the repository is explicitly designed for large-scale projects, with a directory structure that isolates Apollo client setup (apollo), components, config, layouts, pages, public assets, styles, types, and WooCommerce REST controls (wc).
• Quick setup — the entire stack integrates in six steps: clone the repo, change into the directory, install dependencies with yarn install, create an .env.local file from the provided example, insert WooCommerce credentials, and run yarn dev.
• Provided examples — examples for almost all endpoints are included, so developers can see how to query products, orders, and other WooCommerce data through both GraphQL and the REST API.
• Structured code — the codebase separates concerns by folder, making navigation easier as projects grow: types used throughout the app live in types, and Apollo queries are centralized in apollo.
• Material UI components — the project includes @material-ui/core and @material-ui/icons for a ready-to-use React component library.
• Sass support — the package list includes sass, and a dedicated styles folder holds CSS/SCSS files.
• Additional utilities — the dependencies also include clsx for conditional class names and gsap for animation.

Who is it for?

• Ecommerce developers who want a production-oriented Next.js storefront with a WordPress/WooCommerce backend without wiring the integrations themselves.
• Agencies and freelancers who need a repeatable starting point for client projects that require a scalable folder structure and clear examples.
• WordPress developers who are moving to React/Next.js but want to keep using WooCommerce as the commerce engine.

What can you do with it?

• Launch an online storefront — start from a configured Next.js app that talks to WooCommerce through GraphQL and the REST API.
• Build custom ecommerce experiences — use the provided layouts, components, and typed queries as the foundation for a unique store, then extend with additional pages and sections.
• Fast-track client projects — jump directly to feature development because the authentication, API clients, and project structure are already set up.

How does it work?

The quick start documents six concrete steps: clone https://github.com/abwahab3306/nextjs-store.git from the NextJS-WP-Boilerplate branch, enter the nextjs-store directory, run yarn install, create an .env.local file using the provided example, place your WooCommerce credentials, and run yarn dev. The template then loads the storefront with Apollo Client configured to query WPGraphQL and WooCommerce REST API controls ready to use.

FAQ

What stack does NextJS-Store use?

NextJS-Store uses Next.js as the React framework, WordPress and WooCommerce as the content and commerce backend, GraphQL (WPGraphQL) and Apollo Client for data fetching, Material UI for components, and Sass for styling.

How do I configure WooCommerce credentials?

After cloning and installing dependencies, copy the provided example into a .env.local file, enter your WooCommerce consumer key and secret, and run yarn dev. The template then connects to your WooCommerce store through both GraphQL and the REST API.

What packages are included?

The main packages are @apollo/client, @material-ui/core, @material-ui/icons, clsx, gsap, and sass. Documentation links point to WooCommerce REST API, WPGraphQL, Apollo Client, Next.js, and Material UI.

Is NextJS-Store free?

The repository is publicly available on GitHub as an open-source boilerplate. The content does not specify a license or pricing, so assume it is free to clone and use.

Who maintains NextJS-Store?

The copyright line shows Big O Soft LLC as the owner of the repository.