how physically put a new(custom) SXA component for XM Cloud at different code folder structure and not to have all components under components folder ?

at Sitecore it is possible to use SXA modules, and helix structure but at the component lave is it not clear. How to re-create the same structure and use components from different folders not only from the components level.

VS code structure

does anyone has some best practice advice already?

as I see for serialization modules it is possible to set different paths at sitecore.json, but for components, it is totally unclear. or at rendering settings, I just put not name component but use full path instead? enter image description here

1 Answer 1


The component folder in your Next.js app can be structured as you like. You should create folders in there to logically group your components.

For example, you can put the OOTB components into a folder, and create your own folders for things:

Example Folder Structure

When you create the rendering, you just use the component name, you don't need to add a path in there. The component factory, builds the components from all *.tsx files under the ./src/components folder and builds a map using the name of the tsx file. This name is what gets matched to the field on the rendering item:

import { ComponentBuilder } from '@sitecore-jss/sitecore-jss-nextjs';

import * as CdpPageView from 'src/components/SXAComponents/CdpPageView';
import * as ColumnSplitter from 'src/components/SXAComponents/ColumnSplitter';
import * as Container from 'src/components/SXAComponents/Container';
import * as ProductDetail from 'src/components/SXAComponents/ProductDetail';

const components = new Map();

components.set('CdpPageView', CdpPageView);
components.set('ColumnSplitter', ColumnSplitter);
components.set('Container', Container);
components.set('ProductDetail', ProductDetail);

Best practice is just standard Next.js best practices. Group components logically, break things down to more manageable chunks if needed. Don't over complicate things. Aim for a clean maintainable set of components.

Important to note:

  • Helix does NOT apply for headless/XM Cloud. The helix folders still exist in the CM, but do not try to structure your code to follow this in your Next.js application. Just work with Next.js best practices.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.