Storefronts

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.

First, we'll want to clone the Next.js Commerce repothis 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.

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.

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.