Next.js + Salesforce Commerce Cloud

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.

Enviroment variables

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

1
SFCC_ORGANIZATIONID=""
2
SFCC_SHORTCODE=""
3
SFCC_SITEID="RefArch"
4
SFCC_CLIENT_ID=""
5
SFCC_SECRET=""
6
SITE_NAME="ACME Store"
7
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
• SLAS Authorization

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 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

1
pnpm install
2
pnpm dev

Your app should now be running on localhost:3000.