Vendure Next.js Storefront Starter is an official Next.js 16 template from Vendure that gives developers a complete, source-owned customer storefront for Vendure headless commerce.
What is the Vendure Next.js Storefront Starter?
The Vendure Next.js Storefront Starter is an official Next.js 16 storefront template for Vendure headless commerce. It takes a running Vendure server's Shop API endpoint as input and produces a full customer-facing storefront with product browsing, cart, checkout, order management, and customer account features. The template is maintained by Vendure and is designed to be forked and customized while keeping a managed upgrade path.
Key Features
- Authentication & Accounts — Customer registration with email verification, login and logout with session management, password reset and change, and email address updates with verification.
- Customer Account — Profile management for name, email, and password; address management for create, update, delete, and default selection; and order history with pagination and detailed order views.
- Product Browsing — Collections and featured products, product detail pages with variants and galleries, full-text search with faceted filtering, and pagination plus sorting.
- Shopping Cart — Add and remove items, adjust quantities, apply promotion codes, and see real-time cart updates with totals.
- Checkout — Multi-step flow covering shipping address, delivery method, payment, and review, including saved address selection and shipping method selection.
- Order Management — Order confirmation page, order tracking with status, and detailed order information.
- Internationalization — Multi-language support via next-intl with English and German out of the box, multi-currency support with persistent currency selection, and locale-aware price formatting.
- Built to Customize and Upgrade — Developer-owned source with no locked or generated application layer, feature-oriented modules with enforced dependency boundaries, colocated GraphQL operations and translations, and structured release manifests for reconciling upstream changes.
Who is it for?
- Developers building a Vendure storefront — they can start from this template, customize every human-authored file, and rely on feature modules that keep commerce capabilities organized.
- Teams that need to maintain and upgrade a storefront — the upgrade commands (npm run upgrade:init and npm run upgrade:prepare) create a workspace for reconciling upstream changes with local customizations.
- Agencies delivering multilingual stores — the built-in English and German locales and persistent currency selection reduce setup effort for international projects.
What can you do with it?
- Launch a storefront quickly: Point the template at a Vendure Shop API using the VENDURE_SHOP_API_URL environment variable, run npm install and npm run dev, and open localhost:3001 to see the result.
- Build a custom checkout flow: Use the multi-step checkout with saved addresses and shipping method selection to shape the purchase experience.
- Localize for multiple markets: Enable English and German out of the box, extend with more languages through next-intl, and let shoppers persist their currency choice.
How does the storefront work?
The storefront requires a running Vendure server with its Shop API. After copying .env.example to .env.local and setting VENDURE_SHOP_API_URL, the Next.js application connects to that endpoint for all product, cart, checkout, and account data. The source is organized into src/app for route wiring, src/features for vertical commerce capabilities, src/platform for Next.js and Vendure integrations, and src/site for store-specific composition, navigation, and branding.
Pros and cons
- Source-owned architecture — every human-authored file is editable, with no generated application layer to override.
- Structured upgrade workflow — tagged releases include integration intent and commands for reconciling upstream changes.
- Requires a Vendure backend — this starter is not a standalone storefront; it needs a separate Vendure server with the Shop API.
FAQ
Do I need a Vendure server to run this template?
Yes. The storefront fetches all data from a running Vendure server's Shop API. You must set VENDURE_SHOP_API_URL in your .env.local file to point at that API before starting the app.
What languages and currencies are supported out of the box?
English and German are included via next-intl, and the template supports multi-currency with persistent currency selection and locale-aware price formatting. Additional languages can be added by extending the i18n configuration.
How do I upgrade to a new version of the starter?
First run npm run upgrade:init to record the exact upstream provenance of your storefront. Later, on a clean branch, run npm run upgrade:prepare with a target version, which creates a gitignored integration workspace containing old and new upstream snapshots and release guidance.
Can I customize the source code?
Yes. The template is source-owned, meaning every human-authored file in the repository is yours to change. The architecture separates app routing, configuration, features, platform integrations, site composition, and UI primitives to make customizations local and maintainable.
