Crystallize NextJS Boilerplate

The bare minimum skeleton you need to get a frontend up and running on the
headless ecommerce & GraphQL based product Information Management
service Crystallize. React commerce with Next.js SSR.
This Next.js boilerplate is a great starting point when building React
ecommerce experiences with frontend performance in focus. You can
have rich ecommerce content with the super structured PIM engine in
Crystallize powering your product catalogue.
Fast frontend performance delivers a better ecommerce experience and is a key
ingredient in the ecommerce SEO checklist. Rich content driven ecommerce
experiences builds the foundation for a content strategy for exponential
growth marketing.
Check it out, the boilerplate is Open Source and MIT licensed.

Get a quick preview

Getting Started

You can use Crystallize CLI to bootstrap a project with this
Next.js + React boilerplate.
Simply run the following command (>= Node 8 required):

npx @crystallize/cli my-project

This will walk you through the steps of specifying your tenant, choosing the
template (Next.js + React) and adding additional features such as Vercel.
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/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

src/lib-api/

Serverless API functions related code

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