The Commerce.js Next.js Demo Store, also known as Fictional Spoon, is a fully-fledged eCommerce storefront template that combines the Commerce.js v2 SDK, Next.js, and Bootstrap to deliver a high-fidelity shopping experience, deployable to Netlify through a one-click button or manual setup.
What is Fictional Spoon?
Fictional Spoon is an open-source demo store created by Chec, the team behind Commerce.js, as a reference implementation for building JAMstack commerce applications. It takes a Chec merchant account with seeded product data and produces a complete storefront with product browsing, product detail pages, cart management, and a checkout flow. The template runs on Next.js, uses the Commerce.js v2 JavaScript SDK to communicate with the Chec API, and is styled with Bootstrap and SASS. It includes a netlify.toml build configuration and a seed script that imports sample data from the /seeds directory into your Chec account.
Key Features
- Next.js framework — The storefront is built on Next.js, giving you server-side rendering, static site generation, and a clear directory structure for pages and API routes.
- Commerce.js v2 SDK — All eCommerce operations, including fetching products, categories, and handling checkouts, go through the official Commerce.js SDK connected to the Chec API.
- Bootstrap and SASS styling — Global styles are written in SASS and use Bootstrap as the CSS framework, making it easy to customize colors, spacing, and components.
- One-click Netlify deploy — A deploy button on the README clones the repository into your GitHub account and sets up the demo merchant public key automatically, giving you a live preview within minutes.
- Seed script for sample data — Running
yarn seedpopulates your Chec account with sample products, assets, and categories by reading yourCHEC_SECRET_KEYfrom the.envfile, so the store has content on first launch. - Collections merging — The template merges Chec categories with a local
lib/collections.jsfile, letting you control the images and links displayed for each collection by matching slugs. - Customizable checkout — The code includes cart and checkout pages with shipping options, which can be extended for A/B testing or integrating additional fulfillment services.
- Extensibility list — The README documents how to add search, integrate webhooks for post-checkout actions, connect CMS and customer support tools, and fetch real product reviews.
Who is it for?
- Developers learning Commerce.js — They can read the Next.js pages and API calls to see how a real storefront wires product lists, detail views, and checkout to the Commerce.js SDK.
- Merchants evaluating headless commerce — They can spin up the one-click Netlify demo and interact with a working storefront populated with sample data before committing to their own build.
- Teams building a custom storefront — They can fork the repository, seed their own Chec account, replace the sample products and categories, and rely on the existing Netlify deployment configuration to go live.
What can you do with Fictional Spoon?
- Launch a live demo — Use the one-click Netlify deploy with the provided demo merchant public key to get a fully working storefront with the pre-loaded Fictional Spoon products.
- Replace the catalog with your own — After creating a Chec account and running the seed script, you can delete the sample products, add your own categories in the Chec dashboard, and update the collections file to point to your category slugs.
- Experiment with checkout flow — Modify the cart and checkout components to test different designs, add custom shipping zones, or integrate alternative payment methods through Commerce.js.
- Connect external services — The README suggests extending the store with search functionality, customer reviews APIs, CMS integration, and webhook-triggered post-checkout actions like order notifications.
How does the template work?
The template runs as a Next.js application that requests products, categories, and collections from the Chec API using your public key. To set it up manually, you clone the repo, copy the .env.example file to .env, add your CHEC_PUBLIC_KEY and CHEC_SECRET_KEY, run yarn seed to import the sample data, and then start the development server with yarn dev at localhost:3000. For deployment, the one-click Netlify button connects the repository to your GitHub account and automatically sets the demo public key as an environment variable; manual Netlify deployment uses the included netlify.toml for build settings.
Alternatives
- Next.js Commerce — Vercel's official headless commerce starter for Next.js, which supports multiple commerce backend providers like Shopify, Swell, and BigCommerce.
- Medusa — An open-source headless commerce platform that provides its own Next.js storefront starter and gives you full control over the backend.
FAQ
Do I need a Chec account to use this template?
Yes. The storefront requires a Chec public key to fetch products and process checkout. The one-click demo uses a shared demo merchant key for quick previews, but for a real store you must create your own Chec account and use your own API keys.
Can I use my own product data?
Yes. The yarn seed command imports the provided sample data into your Chec account. You can then replace those products and categories in the Chec dashboard and update the lib/collections.js file with your category slugs so the collection images merge correctly.
What Node version do I need?
The README specifies Node v8.2.0 or higher, along with NPM or Yarn. The Chec CLI is also recommended for the chec demo-store setup path, and can be installed globally with npm install -g @chec/cli.
Is the template free to use?
The code is publicly available on GitHub and can be cloned, modified, and deployed without a license fee. You will only pay for third-party services you use, such as Netlify hosting and your Commerce.js plan.
Why did my initial one-click deploy fail?
The README notes that the initial build will fail if you enter your own public key instead of the provided demo merchant key, because your account lacks the sample data that the one-click deployment expects. For a custom store, follow the manual setup steps and seed your account first.
