Skip to main content
More in Learn

Next.js eCommerce Template

This open-source Next.js eCommerce starter is built with best practices in mind. It showcases Crystallize configured for product storytelling covering both eCommerce and marketing. Optimized for SEO, Accessibility, and Performance - and powered by Crystallize’s Discovery API and Shop API.

Next.js ecommerce accelerator screenshot
Table of contents
  1. Getting started
  2. Running the project locally
  3. Accessing the Development Site
  4. Project structure

Getting started

First you can check out the live demo site to get an impression of the functionality in this eCommerce template.

Clone the Github repository to get your local copy of this boilerplate.

You need to set the correct Crystallize tenant and access tokens in the .env file. There is a .env.example you can use as a starting point.

If you want to use the open demo tenant from Crystallize you can use the tenant identifier and tenant id shown below.

Remember: access tokens are secret and should not be shared.

CRYSTALLIZE_TENANT_IDENTIFIER=furnitut
CRYSTALLIZE_TENANT_ID=66d6f90eeeb7a544a0d94362
CRYSTALLIZE_ACCESS_TOKEN_ID=xXx
CRYSTALLIZE_ACCESS_TOKEN_SECRET=xXx

Running the project locally

First, navigate to the project folder containing the package.json file. Then, use npm to start the local deployment.

cd nextjs-furnitut
npm run dev

Accessing the Development Site

Once the development server is running, you will be able to browse to http://localhost:3000/.

Project structure

This is a Next.js project with combination of server side rendering and client side dynamic features like the cart and checkout.

src/app

The app folder contains all the routes / pages for the application. Each route is a combination of the TypeScript code (page.tsx) and the GraphQL query (query.graphql).

People showing thumbs up

Need further assistance?

Ask the Crystallize team or other enthusiasts in our slack community.

Join our slack community