Build your Custom JSS Next.js component in Sitecore XM Cloud

 

In this blog, I will guide you How you can create your custom Next.Js Component with XM Cloud. I am assuming you have already created a site in XM Cloud and you have cloned the starter Nextjs app on your system. If not then you can follow this guide.

In case, if you have cloned the project but facing issues while connecting or running it with XM Cloud instance then you can follow this guide.

Till now, I have found there are different approaches which one can follow, but in this blog, we will create a JSS Rendering, from scratch with minimal complexities, which uses an Item as Data Source created from custom data template.

Please note, we are not using XM Cloud Component Builder to create the components.

Prerequisites

  1. Valid XM Cloud login.
  2. Site must be created on XM Cloud.
  3. Nextjs-starter project must be cloned and in running state.
  4. Code Editor with Git must be working.

Set up Data Template

Step 1: Goto Templates and reach to your site collection folder. In my case my site name is company-a-collection.

Note: If you have created a site, then you would know that Sitecore XM Cloud Deploy App creates the site structure in content editor and it creates site folders in all major folders like in Templates, Media, Rendering and more under the Site name you provide during setup. Basically, it follows Helix architecture. So, we will be using same folders.

Step 2: Create a Folder Item and name it MyComponent.

Step 3: Create a template named MyComponent add 3 fields under Content Field Section. Create below fields:

Heading => Single Line Text

Body => Rich Text

Image => Image

Apply Source to Image field as below:

Step 4: Create Folder Item (Optional)

I have also created MyComponent Folder and set Insert Options like below:

 

Create Data Template Item

Step 5: Create Data Source Item

Goto Data folder in your site and create a new folder from MyComponent Folder Item which was created in Step 4.

Step 6: Create MyComponent item

If you have set insert options on Folder, then you should be able to create new item by right click on Folder item:

I have added 2 data source items, will use in different pages later.

So at this point we are ready with Data Source Item. Now we will create a component in Next.Js. We will be using these field and create simple component. 

Create Next.Js component

Step 7:  Goto your repository and create a simple component named MyComponent.tsx

Add below Code:

import { JSX } from 'react';

import { Text, Field, RichText, Image, ImageField } from '@sitecore-jss/sitecore-jss-nextjs';

type MyComponentProps = {

  fields: {

    heading: Field<string>,

    body: Field<string>,

    image: ImageField;

  };

}

const MyComponent = (props: MyComponentProps): JSX.Element => (

  <div>

    <Text field={props.fields.heading} />

    <RichText field={props.fields.body} />

    <Image field={props.fields.image} />

  </div>

);

export default MyComponent;

We are using very simple example to make the concepts clear. Later we will improve this.

Step 8: Pushing the changes (Optional)

Since we will be viewing the changes on our local environment, so we can skip it as well. But it is better to push the changes since we can use same component in Page Builder as well.

I have setup Auto Deployment for my site with Develop Branch, so if you have already configured like this way then just push your changes being on develop branch , else if not then follow this blog.

https://arjunarora-sitecore.blogspot.com/2025/08/setup-jss-nextjs-project-with-sitecore.html

Step 9: Create Rendering in Content Editor

Setup Data Source Template and Location

 

Step 10: Apply Component on Page

As you can see I have created 2 page items from Page Template, which is using Headless Layout by default, and MyComponent is attached to the page on headless-main placeholder key.

For this page I will using different data source and for contact-us/company-profile I will be using another one:

 

Step 11: Run Next.js Application

You donot need to publish it, just run the application in connected mode. On the browser, you can see both pages loaded up:

Step 12: Adding Style to Component (Optional)

After adding some style to the existing component and reusing the fields it looks like below:

It looks much better now. Adding the style entirely depends upon you. I just used the Github co-pilot to do those changes.

Conclusion

In this blog, we learned how we can create Json Rendering in Sitecore XM Cloud from scratch and using different data source item to view the content.

Comments

Post a Comment

Popular posts from this blog

Working with Device Detection Module in Sitecore

Image
  What is Device Detection in Sitecore? Sitecore has an in-built feature called Device Detection which helps to detect at which device the content is shown into. When I say in-built that means its included as a standard feature in Sitecore XP 9.0 and later. This feature is also present in Sitecore XM Cloud , hence you do not need to buy a separate add-on or module to utilize device detection features.   The information gather from Device Detection Module can help content makers, allowing them to tailor the website experience based on the device type they are accessing it with, such as by displaying different layouts or content depending on screen size and capabilities. For Example, An iPhone and Android users might be looking at different content on same page.   Moreover, developers uses the same mechanism to personalize the components based on the device specific audience. They can setup Device Layout based on specific device parameters or can use the in-built rules...
Read more

Setup A/B Testing in Sitecore - Part 1

Image
  Setup A/B Testing in Sitecore - Part 1 In this article we will understand What is A/B Testing, Types of Testing in Sitecore, Actual Use Case and later we will see how we can setup A/B Testing in Sitecore XP solution with Rendering having different data source items.   Before we go further, lets understand WHAT IS A/B Testing ? A/B testing, also known as split testing, is a method used in marketing and product development to compare two versions of something to determine which one performs better. In an A/B test, two versions, A and B, are created, with one varying element between them. This element could be anything from the wording of an email subject line, the design of a web page, the placement of a button, or even the pricing of a product.   The versions, A and B, are then randomly  shown to similar audiences or users, and their responses are measured and compared. The version that performs better in terms of predefined metrics (such as click-through rate, conv...
Read more

Working with Webhooks in Sitecore - Part 1

Image
  Working with Webhooks in Sitecore - Part 1 In this blog we will understand the concept of Webhooks and how we can use them in Sitecore. So before jumping into Webhooks in Sitecore, first lets understand what webhooks are?   What is a Webhook? They are typically created to connect/link different applications. They are much like API but different from them. Webhooks are one way that apps can send automated messages or information to other apps.   Consider an example below:     Suppose, there is a user facing front application which showcase the product catalogs to its customers. This application is responsible for booking an order from its users. BUT the logistics is handle by different application.   The second application (logistic app) has setup a webhook which is exposed over http and waiting to receive any confirmed orders. Once someone place any order which can be called as an event for the first application, then along with its operation it is passin...
Read more