Crystallize NextJS Boilerplate

This repository is what we call a “subtree split”: a read-only copy of one directory of the main repository.
If you want to report or contribute, you should do it on the main repository: https://github.com/CrystallizeAPI/boilerplates

A fully-working ecommerce storefront boilerplate built with NextJS that runs on
the headless ecommerce & GraphQL based product Information Management
service Crystallize. Clone, run it up and sell!
⚠️ We also have some other open-source ecommerce storefronts that could
be of your interest.

See a LIVE demo

Enjoy our demo furniture site.

Introduction

This Next.js boilerplate is a great starting point when building React
ecommerce experiences that create wonderful user experiences because we
focus on frontend performance.
Build a rich ecommerce that stands out from the others with our super
structured PIM engine (Product Information Management) in Crystallize
powering your product catalogue.
Site speed
is an important component of the
SEO checklist.
Measuring core web vitals
is important to make sure you rank higher in search engines and also improves
your conversion rate. You sell attract more customers and sell more.
Build content rich eCommerce experiences. Freedom in
content modeling
builds the foundation for an successful content strategy.

Get Started Immediately

To get started, you can either watch the livestream where we create an
ecommerce from zero to production explaining all the steps or follow the
instructions below 👇.
Use the Crystallize CLI to bootstrap a project in 4 simple guied steps.
Simply run the following command (>= Node 8 required):

npx @crystallize/cli my-project

This will walk you through the steps:

Choose the tech stack you want

To get this storefront, select: Next.js – Complete ecommerce
Specify your tenant (the name of your project)

At this point, you can select our demo tenant (furniture) or use your own.
If you choose your own, you will have to create the content on our Product
Information Management
Select if you want to support multiple languages
Select the service API

At this point, you can select between our demo Service API or your own
service API tenant.
A Service API is an open-source project that acts as backend for any of
our open-source storefronts that currently hndles the basket, the
checkout, the authentication, webhooks, etc. You can modify and/or extended
it as you like. Deploy it to Vercel, Amazon Web Services, etc. (we’re
adding new provieders)
Take into account that if you’ve selected your own tenant, you need to have
your own service API because our demo Service API doesn’t support products
with different shape/attributes.
To have your own Service API, you’ll need to execute again, our CLI and
select the option “Service API – Backend for any of the frontends”

Once your project has been created, you can simply navigate into your project’s
directory and run the following to start up your development server:

npm run dev
# or
yarn dev

This will start up the server on http://localhost:3000 for development.

App Structure

`src/pages/`

Put all your entry pages here. These are interpreted as separate routes by
Next.js.

`src/pages/api/`

All your Vercel serverless functions.

`src/page-components/`

We use the page-components/ directory to hold the actual component content
related to entries in the pages/ directory.

`src/components/`

All your shared React components.

`src/shapes/`

All your related stuff to shapes. Components, styles, graphql queries and more.

`src/ui/`

UI related components live here. Color variables and simple shared components

`src/lib/`

Enable GraphQL and REST API communication and more for the browser client

`public/static/`

Public resources hosted as static files

Deploying Your Project

There are multiple alternatives for deployments, two of them being Vercel
and Platform.sh

Deploying with Vercel

Register a Vercel account
Install vercel yarn global add vercel or npm i -g vercel
Run vercel

License

Open-source and MIT license.