Working with Next.js application in XM Cloud, In this article I want to summarized what I learn until now.

Reserve fields only for Sitecore Fields

I do consider a good practice to reserve fields field only for Sitecore fields like the following example:

type ContentBlockProps = ComponentProps & {
  // Reserve fields for Sitecore Props
  fields: {
    heading: Field<string>;
    content: Field<string>;
  };
};

The reason that I consider a good practices is because in scenarios that you need to build a custom logic in getStaticProps, I feel that content fields are mixed with logic fields.

type ContentBlockProps = ComponentProps & {
  fields: {
    heading: Field<string>;
    content: Field<string>;
    myProp: MyType // prop not related with content
  };
};

export const getStaticProps: GetStaticComponentProps = async () => {
  const myCustomProp = await myLogic();
  return { fields: {
      myProp: myCustomProp 
   }
  };
};

So consider moving myprops out of fields.

type ContentBlockProps = ComponentProps & {
fields: {
    heading: Field<string>;
    content: Field<string>;
  };
 myProp: MyType // prop not related with content
};

When working with Variations try to reuse component

Per some investigations for name convention it’s a best practice to use PascalCase, however I need to find a way how to differenciate a React Componet vs a Sitecore Component.

So I suggest the following practice (maybe some day this becomes a best practice), anyway I’m open to feedback.

For example consider this scenario:

Simple Masthead with 3 Variations, Default, Color A, Color B.

So I starared to create a component with UI{ComponentName} so this means that this is a React Component that I can reuse it without necessary being a Sitecore Component.

const UISimpleMasthead = ({
 fields,
 variationParams}
}: SimpleMastheadProps): JSX.Element => 
(<>
Markup Here
</>);

Then I can declare the variations with the same approach

const UIDefault = (props: SimpleMastheadProps): JSX.Element => (
  <UISimpleMasthead {...props} variationParams={{ cssStyle: 'default' }} />
);
const UIColorA = (props: SimpleMastheadProps): JSX.Element => (
  <UISimpleMasthead {...props} variationParams={{ cssStyle: 'color-a' }} />
);
const UIColorB = (props: SimpleMastheadProps): JSX.Element => (
  <UISimpleMasthead {...props} variationParams={{ cssStyle: 'color-b' }} />
);

Finally export Sitecore Components / Variations as follows:

export const Default = withDatasourceRendering()<SimpleMastheadProps>(UIDefault);
export const ColorA = withDatasourceRendering()<SimpleMastheadProps>(UIColorA);
export const ColorB = withDatasourceRendering()<SimpleMastheadProps>(UIColorB);

With this approach I can reuse the markup and define the variations using props.

Also this could be used if you are working UI Components so you can Prefix your UI Components to understand that this is a UI and without prefix you know that this is a Sitecore Component.

I’ll continue writing more tips or suggestions to improve your developer experience. Happy coding!