Feature previewHCL Commerce Version or later

Next.js starter store

The Next.js store offers customizable features for storefronts using the Next.js framework. It uses the same data template as the ReactJS stores and supports business-to-consumer (B2C) and business-to-business (B2B) use cases. The store includes pages for browsing, shopping, checkout, and account management, and uses Elasticsearch for search functions.

  • The original Next.js starter store was enabled for B2C only. The sample B2C storefront is called Ruby. For more information, see B2C Next.js store application.
  • HCL Commerce Version or laterThe Next.js store application was enabled for B2B e-commerce in HCL Commerce The sample B2B storefront is called Ruby B2B. For more information, see B2B Next.js store application.
Note: The Ruby store has not been fully tested in all user scenarios. It is provided as a technology preview and is therefore not currently recommended for use in production environments.

The Ruby store is based on the Next.js framework that enables React-based web applications with server-side rendering and generation of static websites. You can create a registered user from the Sign In or Register page. See Registering a new user to the Ruby store to become a registered user.

The store uses the same data template that was used for the ReactJS stores (Emerald/Sapphire) and can be used as a storefront for existing headless store deployments.

Store features

Ruby store offers an extensive set of site-level, category-level, and product-level features:
  • Site level features: Using site-level features, you can customize the look of your storefront. Site level features are visible from multiple pages in your store.
  • Category level features: Category-level features help customers to browse categories, search the catalog, and filter product listings to find the right product.
  • Product level features: Product-level features showcase details about a specific product in your store.
  • Search features: HCL Commerce comes with a powerful and fully integrated search function. The search functions in HCL Commerce provide an enriched customer experience, with features such as automatic search term suggestions and spelling correction.
  • HCL Commerce Version or laterB2B Feature: Next.js offers B2B features to enhance and simplify catalog browsing, order placement, and administration tasks for B2B customers.
The Ruby store has some commonly used flows:
  • Marketing content on home and category pages
  • Guest and Registered user shopping flows
  • Variant support throughout the store and B2C pages with merchandising associations, inventory availability, and promotional messages.

Pages in the Ruby Next.js store

The following pages are included in the implementation for the Ruby Next.js store:
  • Browse Flow:
    • Home page
    • Category page
    • Product listing page
    • Product detail page
  • Search result page with facets
  • Guest and Registered user shopping
  • Registered user management
    • ‚ÄčLogin with email address
    • Register
    • Change and reset password
    • Address Book
      • Create shipping and billing addresses
      • Edit address
      • Delete address
  • Cart page and wish list with recently added items and cart totals
  • Checkout flow (Multi-page checkout)
    • Multiple quick checkout profiles
      • Choose between registered and guest user
      • Shipping and Billing address
      • Address book interaction
      • Payment verification and processing
      • Order confirmation
      • Review the order and payment history
  • My account
  • Error pages
  • Marketing Content on home and category pages
Note: The Ruby stores use the Elasticsearch.


The Next.js store enables customization for adoption and provides a convenient extension paradigm.

For the Next.js store customization, see Creating a custom store using Next.js and docs/customization.md readme file within the git-bundle.