Salesforce Commerce Cloud (SFCC) powers enterprise e-commerce but its default storefront is limiting. Headless SFCC with a custom Next.js frontend delivers modern UX while keeping SFCC's enterprise backend. Here's the architecture.
Meera Iyer
Salesforce Architect
Salesforce Commerce Cloud (formerly Demandware) is an enterprise e-commerce platform used by brands like Adidas, Puma, and L'Oréal. Its strength is the backend: merchandising, promotions, inventory management, order management, and customer service — all built for enterprise-scale operations. Its weakness is the frontend: SFRA (Storefront Reference Architecture) is functional but limited in design flexibility and performance.
The headless approach keeps SFCC's backend while replacing the frontend with a custom application. SFCC's Shopper APIs (SCAPI) expose all commerce functionality — product search, cart, checkout, promotions — as REST APIs. Your custom frontend consumes these APIs, giving you complete design freedom while SFCC handles the complex commerce logic.
SCAPI is SFCC's modern API layer, replacing the older OCAPI. It provides RESTful endpoints for all shopper-facing operations: product search, product detail, cart management, checkout, orders, and promotions. Authentication uses OAuth 2.0 with guest and registered user flows. SCAPI is rate-limited (typically 100 requests/second per tenant) and designed for server-side consumption from your frontend's API layer.
The key SCAPI pattern: use server-side API calls from your Next.js API routes or server components, never client-side from the browser. This keeps your SCAPI credentials secure and enables server-side caching of product data. Cart operations require client-side calls (the cart is user-specific), so implement a BFF (Backend-for-Frontend) proxy that adds authentication headers.
Salesforce provides the PWA Kit — a React-based starter template with pre-built SCAPI integration. It includes product listing, product detail, cart, and checkout components. For teams wanting to move faster, the PWA Kit provides a head start. However, most enterprise projects customize it heavily or replace it entirely with a custom Next.js application.
Salesforce's Managed Runtime hosts the PWA Kit frontend with built-in CDN, global distribution, and SFCC integration. For custom Next.js frontends, we deploy on Vercel or AWS CloudFront instead — the Managed Runtime is optimized for the PWA Kit's React Storefront framework, not arbitrary Next.js applications.
A custom Next.js frontend for SFCC follows the standard headless pattern: product pages are statically generated with ISR, cart operations go through server actions that proxy to SCAPI, and checkout redirects to SFCC's hosted checkout (or uses SCAPI's checkout endpoints for a fully custom flow). The Next.js application authenticates with SCAPI using a client credentials OAuth flow for server-side calls and a PKCE flow for client-side cart operations.
The product data model mapping is the main integration challenge. SFCC's product master catalog, price books, inventory lists, and promotion engine produce a complex data model that doesn't map cleanly to a frontend's needs. The BFF layer normalizes SCAPI responses into the shapes the frontend expects — this isolation means frontend changes don't require SCAPI integration changes.
Enterprise SFCC implementations integrate with dozens of systems: ERP (SAP, Oracle), OMS (order management), PIM (product information), CMS (Contentful, Amplience), payment gateways, tax engines, and loyalty programs. In a headless architecture, some integrations move from SFCC to the frontend layer. CMS content, for example, is typically fetched directly by the frontend rather than through SFCC. Payment processing can use SFCC's built-in integrations or the frontend's direct integration — we prefer SFCC for payment because it handles PCI compliance and fraud detection.
Performance is the primary business case for headless SFCC. SFRA storefronts typically score 40–60 on Lighthouse Performance. Headless Next.js storefronts consistently score 90+. The improvement comes from: static generation (product pages served from CDN), optimized JavaScript bundles (only what's needed for each page), and modern image optimization (next/image with SFCC's image processing). We target sub-2-second LCP globally, which requires CDN distribution with edge nodes in all target markets — the same performance bar our e-commerce development team holds across every e-commerce engagement, headless or not, alongside our dedicated Salesforce Commerce Cloud development practice.
Tags
Meera Iyer
AuthorSalesforce Architect
Meera is a 10x certified Salesforce architect specializing in Commerce Cloud and CRM integrations for enterprise clients.
Continue Reading
Salesforce CRM is the system of record for customer data. But your business runs on custom applications that need that data. Here's the integration architecture — from REST API patterns to event-driven sync with Platform Events.
A practical guide to building AI agents that actually work outside of demos — covering tool selection, memory, error recovery, and deployment patterns we've validated in production.
Two approaches, very different trade-offs. RAG is faster, cheaper, and keeps your data current. Fine-tuning gives you style and behaviour control. Here's when each wins — and when to use both.
From AI agents to mobile apps — iMOBDEV builds what your business needs.
