Time-saving tip for creating XM Cloud renderings and Next.JS Components


Sitecore XM Cloud renderings, templates, and FE components need to follow a certain inheritance structure, which takes some time to re-create for each component we’re building. Here’s a time-saving workflow, set of steps, which might shave some of that time by semi-automating this process.

Clone an existing rendering and its templates in Sitecore

  1. Right-click on existing JSS rendering and choose `Scripts → Clone Rendering1 in the context menu tips-1
  2. Choose the new name and module as needed tips2
  3. Select Make a copy of original rendering parameters in the 2nd tab tips-3
  4. Select Make a copy of original datasource in the 3rd tab tips-4
  5. Click on Proceed and let the underlying PowerShell script to complete.
  6. Now, go ahead and update the newly created rendering, template, and parameter items as needed. This concludes the Sitecore steps to be taken.

2. Clone existing Next.JS rendering

Repeat the same process in your Next.JS project in Visual Studio code: close the original rendering component and update it as needed.