In this guide I'll show you how to create you first SXA Module and Rendering on Sitecore XM Cloud using Next.js and SXA.

We'll be following this guide to clone the appropiate rendering based on our requirement: Sitecore XM Cloud Developer Experience

SXA Modules

In Sitecore XM Cloud, when we talk about SXA modules, we are discussing grouped sets of features and functionalities that are bundled together for better structure, reusability, and separation of concerns. Each SXA module is essentially a container or package that groups related components, templates, rendering variants, and logic under one umbrella. This allows for better modularization and site management in large-scale projects.

Why Use SXA Modules in XM Cloud?

Separation of Concerns: By grouping related components into modules, you keep the codebase clean and maintainable. Each module handles a specific part of the site's functionality.
Reusability: SXA modules make it easier to reuse components across different sites or sections within the same project. For instance, the Navigation SXA Module can be used across multiple sites in a multisite architecture.
Flexibility in Development: Different teams or developers can work on different SXA modules without impacting others, making it easier to parallelize work and minimize conflicts.
Customization: Since each module is isolated, you can make changes or customizations in a specific area (like the navigation) without affecting other parts of the site.

Creating your first SXA Module

Navigate to this path:

/sitecore/system/Settings/Project

In there you can right click -> Insert and you'll see the following option, click Headless Module

On the wizard you can check or uncheck the options that fit your needs and also change the path where the Module will create.

Rendering

Under the following path you'll find the SXA renderings to clone, following the guide.

/sitecore/layout/Renderings/Feature/JSS Experience Accelerator/Page Content

We'll go with a component that require a Datasource, that's why we'll be cloning the Promo rendering.
Right click -> Scripts -> Clone Rendering
In the wizard you can change the rendering name, what module you'll be adding the rendering into and a CSS class.

In the Paramteres and Datasource tabs do the following update:

Parameters

Datasource

After that, click Proceed and this will create your new rendering.

Configuring your rendering

Go to your rendering and make sure the ComponentName is in the following format, for example, if you created the "CTA Row Link" rendering, the component name should look like this:

In here you can also manage Placeholders that this component will have, scroll down to the Layout Service section and you can select a Content Resolver and a Placeholder for the component, for this component we won't be needing any of those.

Coding

There's different parts to a rendering.
First of all we need to define the Field, for this we use a typescript interface.
Let's assume our component has 3 fields:

Heading (single line text)
Copy (rich text)
Link (general link)

This fields must match the ones on your template.
So we can do the following:

interface Fields {
    heading: Field<string>;
    copy: Field<string>;
    link: LinkField;
}

After that we need to define our type. For this TestComponent we'll be using the following structure:

type TestComponentProps = ComponentProps & {
    fields: Fields;
};

And then we just need to render our fields in a React Component:

const TestComponent = ({ fields, params,  }: TestComponentProps) => {

    return (
        <section className={params.styles} >
            <Text field={fields.heading} />
            {fields.copy && fields.copy.value && (<RichText field={fields.copy}/>)}
            {fields.link && fields.link.value && (<Link field={fields.link}/>)}

        </section>
    );
};

Finally we need to export the component. Since we're working on a component that uses a datasource we use the withDatasourceCheck HOC to return our rendering.

export default withDatasourceCheck()<TestComponentProps>(TestComponent);

Our final component with all it's imports will look like this:

import { Field, LinkField, Text, RichText, Link, withDatasourceCheck } from '@sitecore-jss/sitecore-jss-nextjs';
import { ComponentProps } from 'lib/component-props';


interface Fields {
    heading: Field<string>;
    copy: Field<string>;
    link: LinkField;
}

type TestComponentProps = ComponentProps & {
    fields: Fields;
};

const TestComponent = ({ fields, params,  }: TestComponentProps) => {

    return (
        <section className={params.styles} >
            <Text field={fields.heading} />
            {fields.copy && fields.copy.value && (<RichText field={fields.copy}/>)}
            {fields.link && fields.link.value && (<Link field={fields.link}/>)}

        </section>
    );
};
export default withDatasourceCheck()<TestComponentProps>(TestComponent);

Conclusions

Creating SXA modules and renderings on Sitecore XM Cloud with Next.js provides a highly modular, reusable, and flexible development environment. SXA modules allow for efficient management of complex projects, making it easy to structure and reuse components across multiple areas of a site. By following these steps, you can streamline the process of developing custom components, giving you the power to rapidly build and deploy new functionality. As your project grows, this modular approach will help ensure maintainability, scalability, and flexibility across your Sitecore XM Cloud solution.

Creating your first SXA Module and Rendering on Sitecore XM Cloud