HCL Commerce Version 9.1.13.0 or later

Creating a custom store using Next.js

You can create a server-side rendered storefront using the HCL Commerce Next.js Store SDK. The Next.js Store SDK allows your front end development of a storefront using an easy extension paradigm.

For more information about the Next.js storefront, see Next.js starter store.

The Next.js Store SDK is created from two components:

  1. A Next.js application developed and deployed by a front end developer using the Store SDK.
  2. A Next.js Store Data Model (Extended Site Store (eSite), Catalog Asset Store (CAS) and Storefront Asset Store (SAS)) published by the front end developer or site administrator with associated content created by business users and then publishing a store model with data using the Store publish tools.

Next.js store architecture

For the overview of Next.js store architecture, see the docs/overall-design.md readme file within the git-bundle.

Publishing a headless store

The Next.js store uses the same data template as the ReactJS store. For more details, see Publishing a React Store.
Note: The data model for Next.js stores and ReactJS stores is the same, so existing published stores can be used with Next.js.
When creating an eSite, Management Center for HCL Commerce uses the Storefront Asset Store (SAS) context path by default. To ensure that a unique context path exists for the newly published store, add a record to the STORECONF table. See the following SQL example for adding a record to the STORECONF table.
insert into storeconf(storeent_id, name, value) values(<storeent_id>, 'headlessStore.storeContextRoot', NULL);

where storeent_id is the storeent_id of the newly published eSite.

In the absence of such a record, the context path associated with the SAS of the newly published store will be used. Alternatively, to assign a non-empty context path to the newly published eSite, replace NULL with /context-path in the above query where context-path is the desired context path. See the following SQL example for New eSite. 
insert into storeconf(storeent_id, name, value) values(<storeent_id>, 'headlessStore.storeContextRoot', 'newesite');

Email templates and notifications

Setting email templates and notifications for Next.js and ReactJS stores is the same. For more details, see Email Templates and Notifications.

Previewing the store

Store preview functions are enabled for the Next.js stores. For more details, see Store preview and Preview Store Pages.

Page composer

The Next.js stores use Management Center Page Composer layouts.

For more details, see the docs/layout-usage.md readme file within the git-bundle.