# Next.js Commerce

Source: https://developers.swell.is/storefronts-v1/storefront-apps/next-js-commerce

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.

### Manual installation

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.