HCL Commerce Version 9.1.13.0 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 9.1.14.0 or laterThe Next.js store application was enabled for B2B e-commerce in HCL Commerce 9.1.14.0. The sample B2B storefront is called Ruby B2B. For more information, see B2B Next.js store application.

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.

HCL Commerce Version 9.1.16.1The orchestration service has been added to allow customers to run the Ruby starter store with Solr search. For more information, see Orchestration service.

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. These functions provide an enriched customer experience with features such as automatic search term suggestions and spelling correction. HCL Commerce has two search solutions and both are supported by the Ruby store.
  • HCL Commerce Version 9.1.14.0 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

Customization

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.

Comparison with client-side storefronts

Category Client-side storefronts Server-side storefronts
HCL Deliverable Emerald/Sapphire (ReactJS) Ruby/Ruby B2B (Next.js)
OOB SEO No Yes
Possible SEO Plugins
  • Prerender.io
  • SEO4ajax.com
N/A
Deployment
  • Packaged JS bundle
  • Web-server to serve JS
  • Packaged JS bundle
  • NodeJS server to serve:
    • JS
    • Rendered content (HTML)
Workload Client-side browser
  • NodeJS server
  • Client-side browser