This React ecommerce starter-kit features everything developers need to start creating their storefront. Next.js Commerce comes fully styled with all UI elements for core ecommerce functionality built-in, like carts and product detail pages. It also supports a number of features for performance optimization. For new projects, use Vercel's clone and deploy feature or it can be implemented manually.

One-click deploy

On Vercel’s Commerce site, click the clone and deploy button. In the new window, you will name and create the Git repository to be linked to your project. Within the Add Integrations section, select Add for the Swell Integration. From here, proceed to the setup instructions.

You'll need to select the desired scope and project to add to the integration. The next step is dependent on whether or not you already have your Swell store created:

  • If you are connecting an existing Swell store, choose Connect to an existing account. Enter the name of your store—this is your store domain (for example, your-store.swell.store). Proceed through the flow to authorize and allow Vercel to access your basic Swell store information.
  • If you need to create your Swell store, choose Create a new store. You will be redirected to Swell and prompted to complete the Swell store set up for a new store. Once completed you will be taken back to the integration flow. Select Resume setup and I already have a store. Enter your store name (for example, your-store.swell.store) and continue through the rest of the flow to allow Vercel access to your Swell store information.

Once you make it through the OAuth flow, you're all set! Your Next.js Commerce starter kit is now connected to your Swell store and ready for development.

The above setup instructions are also applicable for adding the Swell integration to an existing Vercel project.

Manual installation

Below are the instructions for installing this storefront app manually.

Get the repo

First, we'll want to clone the Next.js Commerce repo—this can also be found and cloned from your Vercel dashboard in the templates section after creating a new project if you are hosting with Vercel.

Configure your .env file

Once you have cloned the project, you will need to create a .env file based on the .env.template provided within the project. The file requires your Swell Store ID and your public API key—both of which can be found in the Swell dashboard under Developer > API Keys.

In the .env, provide your Swell Store ID and public API key in the following format:

Next.js Commerce .env example
COMMERCE_PROVIDER=swell
NEXT_PUBLIC_SWELL_STORE_ID= < your Swell Store ID >
NEXT_PUBLIC_SWELL_PUBLIC_KEY= < your Swell store's public API key >

This information can also be accessed within the Next.js Commerce readme.

Deploy Next.js

With the .env file configured with your Swell store information, you are ready to deploy your storefront. Fill out any additional settings or configurations, and you're ready to deploy on your hosting provider of choice.

If you are hosting it on Vercel, select and import the appropriate repo when creating a new project to use for deployment from within the dashboard, and hit deploy. You can alternatively utilize the Vercel CLI for deployment.