JAMStack eCommerce Boilerplate with NextJS & React

The Crystallize Next.js Boilerplate makes it super easy to get up and running with building your own Crystallize ecommerce store. It also provides a starting point for integrating with third party services including email and payment services. The current example integrations include:

• Stripe for processing payments
• Klarna for processing payments
• SendGrid for login and order confirmations
• Vercel for easy deployment

In order to get started with this boilerplate we will be using Crystallize CLI. This tool allows you to bootstrap a project using any of our boilerplates and provides options to add or remove features and integrations to suit your needs.

This example will demonstrate how to create a project, using the React + Next.js boilerplate, using Stripe for payments, and Vercel for deployment.

In order to use Crystallize CLI and run our project, you will need to have the following installed on your computer:

• Git
• Node.js (minimum version 10)
• Vercel CLI

You will also need to create a tenant with Crystallize by signing up and generating a Crystallize access token. The tenant identifier is required to retrieve the products related to your store and the access tokens are required for creating and retrieving orders.

If you are wanting to use Stripe for processing payments you will also need to sign up for a free Stripe account and get your test Stripe publishable and secret keys (you can also use the live keys in production).

You will need a free Vercel account in order to deploy your project to Vercel.

To create a new Crystallize project we will use Crystallize CLI. The CLI tool provides a simple step-by-step set of choices to customise your project that allows you to easily bootstrap a project tailored to suit your needs.

To create a new project you can simply run the following command with npx:

npx @crystallize/cli <your-project-name>

Running this command will give you the choice of which Crystallize tenant to use. Select "My very own tenant please" and enter your own tenant identifier.

The next step will ask you to choose a template. We will be using the "Next.js + React" template.

You will then be prompted to choose which components you'd like to add to your project. You can use <space> to select and deselect options. In this example we will choose the "Use Vercel for deployments" and "Add payment methods for checkout" options.

If you've chosen to add payment methods to your project, you will be prompted to select which ones you would like to add. In this example we will be only using Stripe.

You will now be prompted to enter your tokens for both Crystallize and Stripe. If you do not already have these (see Prerequisites), you can skip this for now and edit the generated .env file later on.

You will then be asked whether you would like to save these settings as default for next time. This is good if you want to quickly spin up a new project with the same settings.

Running the project in development is very straightforward. Running the following command will start up the development server:

yarn dev

Once the development server is running, you will be able to browse to http://localhost:3000 (or the next available port if 3000 is not available)

In order to deploy our project to Vercel, we need to set our API tokens as secret environment variables. First we need to login to Vercel via the CLI.

vercel login

You can set secret variables using Vercel CLI in the format of:

vercel secrets add <secret-name> <secret-value>

The names of each secret used in Vercel can be found in the env section of your vercel.json file. For Crystallize and Stripe tokens, this is:

vercel secrets add crystallize-access-token-id <your-token-id>
vercel secrets add crystallize-access-token-secret <your-token-secret>
vercel secrets add stripe-publishable-key <your-publishable-key>
vercel secrets add stripe-secret-key <your-stripe-secret>

If you are deploying to production you can choose to use your live Stripe keys for this deployment instead of the test ones.

Deploying your Crystallize project with Vercel is easy. You can do this by simply running the following command:

vercel

This will build the website and deploy it to Vercel. The terminal will say whether the deployment was successful or not. If it has succeeded, you will be given a URL where your site has been deployed.

If you are deploying to production, you can also use the following command to deploy your website to a production domain if you have configured one for your project within the dashboard of Vercel:

vercel --prod