Driving the best use of Placeholders in NextJs App in XM Cloud


If you have worked in Sitecore, then one of the most common term which is being used is called Placeholder keys. They are like the specific area kept reserved in the html structure where you can bind more component. These specific areas are given a name which us being used as key name, see the below example:

<div class=”main-content”>

              <Placeholder name="placeholder-key-1"….

</div>

In XM Cloud, if you are using NextJs as your frontend framework, then adding a placeholder key requires some configurations. I will discuss the steps required and configuration required.

Approaches

As far I know, there could be three approaches one can follow to bind the components on layout.

First approach is stacking the components to same placeholder key available at layout.tsx in NextJs app.

The problem with this approach is that it restricts flexibility, reusability, and scalability in case of designing and structing of content.

Second approach, is to use the static placeholder within the component and bind the other re-usable component to that very placeholder key, basically it has a fixed key and remain same on each use.

And, the Third approach is to use Dynamic placeholder, which allows you to add multiple renderings to the dynamically generated placeholder keys allowing create/managing more complex structures.

In this blog, I will be covering the static placeholder approach, which will put you in better position than using the first approach.

Following Static Placeholders Approach

Step 1: Create a container component

In this component I will be adding the placeholder keys, and later I will add some XM Cloud Components to it.

 

'use client';

import { JSX } from 'react';

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

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

type ContainerComponentProps = {

    rendering: ComponentRendering;

};

const ContainerComponent = (props: ContainerComponentProps): JSX.Element => {

    const { rendering } = props;

    return (

        <div>

            <p>This is container Component</p>

            <br />

            <Placeholder name="placeholder-key-1" rendering={rendering} />

            <hr />

            <Placeholder name="placeholder-key-2" rendering={rendering} />

        </div>

    );

};

export default ContainerComponent;

Note: keep a note of the placeholder keys which is being added.

Step 2: Push the changes to XM Cloud

Save the component and push the changes to your branch and deploy the changes using the XM Cloud deploy app.

Make sure the deployment is successful.

 

Step 3: Create placeholder keys

Goto path /sitecore/layout/Placeholder Settings/Project/{your-site-collection-name}/{your-site-folder}

Create 2 placeholder keys like below:

 

Step 4: Adding placeholder keys to the rendering layout service

Goto your container component/rendering and reach the Layout Service Section and include the placeholder keys like below:

Step 5: Adding container component on Page item

In this step, we will be adding the container component on some page item.

I have used headless-main as placeholder key. This component will act as container component which contains 2 placeholder keys placeholder-key-1 & placeholder-key-2, which can logically hold 2 components although It entirely depends upon you.

Step 6: Opening Page Builder

Now this step is important, In order to attach the component to some placeholder key, you need to open that particular page in the XM Cloud page builder.

If you have done the configuration correct, you must be able to see 2 placeholder keys on that page item in Page builder mode.

Step 7: Adding components to placeholder keys

I have already created some XM Cloud Components which are available under Components sections like below:

So, if you are looking how these components are created then please follow this blog.

Now coming back to the page builder, add these custom components to the placeholder keys one by one.

 

Above is after adding the components. Also check the page item in content editor:

You will see the placeholder key got some dynamic value:

  Checking the results on front end app:

Conclusion:

In this blog, I have tried explaining the steps required to configure your NextJs app to be able to add the components to the placeholder keys. This approach is very useful when you are working on nested components and wanted to structure your app perfectly.


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