Crystallize NextJS Boilerplate is an open-source ecommerce storefront starter for Next.js that builds high-performance React storefronts on the Crystallize headless commerce and GraphQL PIM platform.
What is Crystallize NextJS Boilerplate?
It is a fully-working ecommerce storefront boilerplate built with Next.js, React, and GraphQL, designed to run on the Crystallize headless ecommerce and Product Information Management (PIM) service. The repository is a subtree split of the main CrystallizeAPI/boilerplates repository, is open-sourced under an MIT license, and is maintained by Crystallize. It takes product catalog data modeled in Crystallize's PIM and renders a complete storefront, with a live demo furniture site at furniture.superfast.shop.
What makes Crystallize NextJS Boilerplate stand out?
- Next.js and React — Built on the latest Next.js and React, enabling server-side rendering, static generation, and edge page generation for strong frontend performance and SEO.
- Crystallize PIM and GraphQL API — The product catalog is served through Crystallize's super-structured PIM engine and a GraphQL API, combining rich marketing content with product information.
- Crystallize CLI bootstrap — Create a new project in four guided steps with
npx @crystallize/cli my-project, choosing the "Next.js - Complete ecommerce" option. - Multi-language support — The CLI prompts you to select whether to support multiple languages, scaffolding a storefront that can serve localized content.
- Service API backend — Optionally scaffold the open-source Service API, which handles basket, checkout, authentication, webhooks, and more, and can be deployed to Vercel or AWS.
- Serverless functions and deployment — The
src/pages/apidirectory provides Vercel serverless functions, and the storefront can be deployed to Vercel or Platform.sh using the README instructions.
Who should use Crystallize NextJS Boilerplate?
- React/Next.js developers — who want a head start on building an ecommerce storefront with a proven architecture instead of starting from scratch.
- Ecommerce teams using Crystallize — who need a frontend that integrates directly with their product catalog in Crystallize's PIM.
- Developers exploring JAMStack — who want a reference implementation of an edge-rendered storefront with serverless functions and a composable backend.
What can you do with Crystallize NextJS Boilerplate?
- Storefront builders: clone and run a fully-working storefront that sells products from a Crystallize catalog; the demo furniture site is live at furniture.superfast.shop.
- Content-rich commerce: combine rich marketing content with product information from the PIM engine to build stores that stand out from standard catalogs.
- Multi-language stores: use the CLI to scaffold a storefront with support for multiple languages, then customize localized content.
- Custom backend scenarios: modify or extend the Service API to handle basket, checkout, auth, and webhooks, and deploy it to Vercel, AWS, or other providers.
How does the boilerplate work?
The project is scaffolded with the Crystallize CLI. Run npx @crystallize/cli my-project, then choose the "Next.js - Complete ecommerce" tech stack. Specify your tenant (the demo furniture tenant or your own), decide whether to support multiple languages, and select the Service API. After scaffolding, run npm run dev or yarn dev to start the development server at http://localhost:3000.
Pros and cons
- Pros: Open-source MIT license; fully tuned for JAMStack edge performance; supports multi-language storefronts; flexible Service API that you can extend; deploys to Vercel or Platform.sh.
- Cons: The demo Service API only works with the demo furniture catalog — custom product shapes require running your own Service API; the storefront depends on the Crystallize platform for catalog and commerce services.
Pricing
The Crystallize NextJS Boilerplate is free and open-source under the MIT license.
Alternatives
Next.js Commerce — a headless ecommerce starter built by Vercel for the Next.js ecosystem.
FAQ
Is the Crystallize NextJS Boilerplate free?
Yes. The boilerplate is open-source and distributed under the MIT license, so you can use it, modify it, and deploy it without licensing fees.
What Node.js version do I need?
The Crystallize CLI requires Node version 8 or higher. After scaffolding, you can start the development server with npm run dev or yarn dev, which serves the storefront at http://localhost:3000.
Can I use my own product catalog with this boilerplate?
Yes. During the CLI setup you can choose your own tenant instead of the demo furniture tenant. You will then need to create your product content in Crystallize's PIM and run your own Service API, because the demo Service API only supports the furniture catalog's product shape.
Does the boilerplate support multi-language stores?
Yes. The CLI includes a step to select whether you want to support multiple languages, and the scaffolded project will include the necessary structure for localized content.
Where can I deploy the storefront?
The boilerplate can be deployed to Vercel or Platform.sh. The README explains how to deploy with Vercel by installing the Vercel CLI and running vercel.
