Creating your first rendering on Sitecore XM Cloud
Published: 2023-12-07 03:42:11

This guide will take you through a step-by-step process of creating, coding, and configuring your first rendering/component within Sitecore XM Cloud using Next.js. Our focus will be on implementing a straightforward component with three fields and a placeholder.

## Folder Structure
To create your first rendering, it is essential to grasp the folder structure. Sitecore, by default, considers every component within the 'Components' directory, mapping and preparing them for rendering content when needed. For this example, let's craft a 'CallToActionCardRow' component situated in the 'Related Content' directory. Consequently, the folder structure will appear as follows:

> Pro Tip: Enhance reusability by separating the type (model) from the component.

![Folder structure for the component](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gyxid5tgqxesurgij9ns.png)

## Creating the corresponding type/model
The initial step in creating the component is to establish the type. In this case, the component is simple, featuring only three fields. The type is defined as follows:

![Type file with the corresponding fields](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/69nb148lcbj13f7730wl.png)

We will only have three fields: heading, copy and a trailing copy. 

## Creating the component

This is the end product, and now I'll break down what's going on inside the component.

![The component](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lxoc9sk64n5hfqdusjtm.png)

- First, we bring in the data types we need, including our custom type from earlier. Then, we set up the props type and the component type itself. Since we're using TypeScript, nailing down the correct types is crucial for both props and the component function.

- Inside the component, it's pretty straightforward – we use JSX to structure our component the way we want. With Sitecore components, we can define our fields more effectively. For instance, we use 'Text' for the heading and 'RichText' for our copy field.

- To create a Placeholder, we incorporate the Placeholder component and give it a name (which has to match the one in the CMS). Lastly, we create the default export for the component using the 'withDatasourceCheck' function, and we're all set to configure things in the CMS.

## Inside the CMS
### Templates
To set up the template, create an item under 'Template' in the content tree:

![Template item created under Template in the content tree](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i9cdl1v1zc0c2pc0ros4.png)

Next, establish the corresponding fields, ensuring the use of camelCase syntax, mirroring the TypeScript type.

![Template fields](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dsi95vm91ljbbifwp6eu.png)

### Placeholder Settings
Proceed to create our placeholder settings under Layout/Placeholder Settings:

![Placeholder settings item](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gr4r0x5cwq0zssk21vjn.png)

Make sure you set up the PlaceholderKey—it should match the one in the component. Also, list the allowed controls or renderings that can go inside this specific placeholder.

![Placeholder setting item configuration](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/68r86gptg6lyurbkrbsv.png)

### Rendering
To wrap up, navigate to Layout/Renderings and craft your rendering. It's crucial to use the Json Rendering template.

![Rendering item](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8ifq09vsa2pqklsqq7wu.png)

Configure the 'Component Name' field; it must match the one specified in your Next.js project.

![Rendering item configuration](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/795u51znrtuwdor9urcd.png)

As we're implementing a placeholder, scroll down to Layout Service and choose the corresponding placeholder.

![Setting up the placeholder on the rendering](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d0l8zrclg3jwv83k8dte.png)

### Add the rendering to the Available Renderings
To complete the setup and make it usable, the final step is to place it under Site/Presentation/Available Renderings. In this case, create an 'Available Renderings' item.

![Available rendering content tree item](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fyh3ida3stpqmft4l21t.png)

Inside of it, configure the corresponding rendering

![Available rendering configuration](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rlxmyy95i6cgtjmpoecc.png)

## Test the component
With this setup, navigate to the Pages editor and find, under Components, the Available Renderings we configured, including our newly created rendering.

![Sitecore Pages Available Renderings](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7ae17vsdop5xzvo4u8po.png)


As we didn't configure any standard values, messages will appear indicating that our fields lack text. However, you can still observe our heading, copy, trailing copy, and, of course, our placeholder.
![Testing of the component](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/io7qx1ngjl1yj265pit6.png)