Storefronts
This Next.js 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
Visit this link. In the new window, you will name and create the Git repository to be linked to your project. Add the required environment variables. For the SWELL_REVALIDATION_SECRET, we recommend using a random generated key to generate a key. You can find your SWELL_STORE_ID SWELL_PUBLIC_KEY in the admin dashboard setting at Developer > API keys.
Once you make it through the setup flow, you're all set! Your Next.js Commerce starter kit is now connected to your Swell store and ready for development. You can clone the repository from your GitHub / GitLab / Bitbucket account.
Below are the instructions for installing this storefront app manually.
Get the repo
First, we'll want to clone the Verswell 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.example 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
COMPANY_NAME="Vercel Inc."
TWITTER_CREATOR="@vercel"
TWITTER_SITE="<https://nextjs.org/commerce>"
SITE_NAME="Next.js Commerce"
SWELL_PUBLIC_KEY=
SWELL_STORE_ID=
SWELL_REVALIDATION_SECRET=
This information can also be accessed within the Verswell 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.