---
title: "Next.js + Salesforce Commerce Cloud"
description: "Starter kit for high-performance commerce with Salesforce Commerce Cloud and Next.js."
url: "https://vercel.com/templates/next.js/next-js-salesforce-commerce-cloud"
links:
  repository: "https://github.com/vercel-partner-solutions/nextjs-salesforce-commerce-cloud"
  demo: "https://nextjs-salesforce-commerce-cloud.vercel.app"
  deploy: "https://vercel.com/new/clone?demo-title=Next.js+%2B+Salesforce+Commerce+Cloud&demo-description=Starter+kit+for+high-performance+commerce+with+Salesforce+Commerce+Cloud+and+Next.js.&demo-url=https%3A%2F%2Fnextjs-salesforce-commerce-cloud.vercel.app&demo-image=%2F%2Fimages.ctfassets.net%2Fe5382hct74si%2F7mk5JvZ2FgZ1gvA3KcFKC0%2F90d408e8b328003d8845ba7edf7ece5e%2FCleanShot_2025-04-29_at_15.30.35_2x.png&project-name=Next.js+%2B+Salesforce+Commerce+Cloud&repository-name=next-js-salesforce-commerce-cloud&repository-url=https%3A%2F%2Fgithub.com%2Fvercel-partner-solutions%2Fnextjs-salesforce-commerce-cloud&from=templates&skippable-integrations=1&env=SFCC_CLIENT_ID%2CSFCC_ORGANIZATIONID%2CSFCC_SECRET%2CSFCC_SHORTCODE%2CSFCC_SITEID%2CSITE_NAME%2CSFCC_REVALIDATION_SECRET"
---

# Next.js + Salesforce Commerce Cloud

Starter kit for high-performance commerce with Salesforce Commerce Cloud and Next.js.

[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fvercel%2Fcommerce-sfcc&env=COMPANY_NAME,NEXT_PUBLIC_VERCEL_URL,SFCC_CLIENT_ID,SFCC_ORGANIZATIONID,SFCC_SECRET,SFCC_SHORTCODE,SFCC_SITEID,SITE_NAME,SFCC_REVALIDATION_SECRET&project-name=nextjs-commerce-sfcc&repository-name=nextjs-commerce-sfcc&demo-title=ACME%20Store&demo-description=A%20high-performance%20ecommerce%20store%20built%20with%20Next.js%2C%20Vercel%2C%20and%20Salesforce%20Commerce%20Cloud&demo-url=https%3A%2F%2Fnextjs-salesforce-commerce-cloud.vercel.app%2F)

# Next.js Commerce + Salesforce Commerce Cloud

A high-perfomance, server-rendered Next.js App Router ecommerce application.

This template uses React Server Components, Server Actions, _Suspense_, _useOptimistic_, _use cache_ and more.

## Providers

This version of Next.js Commerce is integrated with Salesforce Commerce Cloud. The integration code for Salesforce Commerce Cloud can be found in the _lib/sfcc_ directory.

For information on other commerce providers, additional details, and the core Next.js Commerce template, please refer to the official [Next.js Commerce repository](https://github.com/vercel/commerce).

## Enviroment variables

This project requires the following environment variables for connecting to Salesforce Commerce Cloud:

```
SFCC_ORGANIZATIONID=""
SFCC_SHORTCODE=""
SFCC_SITEID="RefArch"
SFCC_CLIENT_ID=""
SFCC_SECRET=""
SITE_NAME="ACME Store"
SFCC_REVALIDATION_SECRET=""
```

- _SFCC_ORGANIZATIONID_: Salesforce Commerce Cloud Organization ID
- _SFCC_SHORTCODE_: Salesforce Commerce Cloud instance short code
- _SFCC_SITEID_: ID of the target site
- _SFCC_CLIENT_ID_: SLAS API Client ID
- _SFCC_SECRET_: SLAS API Client Secret
- _SITE_NAME_: User-defined name for the site
- _SFCC_REVALIDATION_SECRET_: User-defined string for on-demand revalidation

Please refer to the official Salesforce Commerce API documentation for details on how to retrieve these values:

- [Base URL Configuration](https://developer.salesforce.com/docs/commerce/commerce-api/guide/base-url.html)
- [SLAS Authorization](https://developer.salesforce.com/docs/commerce/commerce-api/guide/authorization-for-shopper-apis.html)

## Store configuration

This project works with a standard Salesforce Commerce Cloud _RefArch_ site with minimal modifications. However, for the homepage to display content correctly, two product categories must be created:

- _hidden-homepage-carousel_: This category populates the main carousel on the homepage
- _hidden-homepage-featured-items_: This category populates the featured products section on the homepage

Create these two categories and assign products to them within Business Manager.

## Running locally

You will need to use the environment variables defined in _.env.example_ to run Next.js Commerce. It's recommended you use [Vercel Environment Variables](https://vercel.com/docs/concepts/projects/environment-variables) for this, but a _.env_ file is all that is necessary.

> Note: You should not commit your _.env_ file or it will expose secrets that will allow others to control your Salesforce Commerce Cloud store.

1. Install Vercel CLI: _npm i -g vercel_
2. Link local instance with Vercel and GitHub accounts (creates _.vercel_ directory): _vercel link_
3. Download your environment variables: _vercel env pull_

```bash
pnpm install
pnpm dev
```

Your app should now be running on [localhost:3000](http://localhost:3000/).

## Related Templates

### [Next.js Commerce](https://vercel.com/templates/next.js/nextjs-commerce)

Starter kit for high-performance commerce with Shopify.

### [Platforms Starter Kit](https://vercel.com/templates/next.js/platforms-starter-kit)

Next.js template for building multi-tenant applications with the App Router and Redis.

### [Next.js + BigCommerce Starter](https://vercel.com/templates/next.js/bigcommerce-starter-nextjs)

A Next.js 14 and App Router-ready headless storefront template for BigCommerce.

---

## Additional documentation

The [Vercel Knowledge Base](https://vercel.com/kb) contains guides and answers to common questions about Vercel, including deployment, framework configuration, domains, caching, and troubleshooting.