Working with Basic Placeholder in Next.js

Before we see what the placeholder is? how we are going to place it in the Next.js application, we must run the local Next.js application in connected mode to enable all the functionalities like personalization, testing and editors abilities to do all the modification of the pages. In disconnected mode, placeholder will act as a parent component for all the respective renderings.

What is the Placeholder?

A Placeholder is a special component in the Headless, when we add this placeholder in the any of the renderings, we needed the named placeholder key. Here we are going to see how to create the basic custom placeholder in Sitecore and how we map the same in application.

Sitecore Headless Placeholder:

In Sitecore Headless, Placeholder itself is considered as a component because in the JAM Stack approach (react, nextjs), everything is defined as a component.

In this article, I am going to create two different placeholders, one is “Header” and another one is “Footer”.

To create placeholder in Sitecore, go to “/sitecore/layout/placeholder settings/project/<project_name>” and create placeholder like below :

Choose Placeholder template to create new placeholder.

In Content Editor, we can set the placeholder restrictions for layout placeholders, these restrictions are applied for all the pages in the site.

Choose Placeholder key while creating a placeholder.

Create footer placeholder by following the same steps.

Now we are ready with the custom placeholders in Sitecore.

Just browse and check the https://localhost:3000 is up and running.

Next step to create Header and Footer renderings in Sitecore.

Go to “/sitecore/layout/renderings/project/<project_name>/” and right click and choose “Json Rendering” and create “Header” and “Footer” renderings.

Parallelly I am creating the basic Header and Footer component using their respective templates in Sitecore and creating the Header.tsx and Footer.tsx in local next.js application.

Let’s add the allowed controls in “jss-top-header” and “jss-bottom-footer” placeholders like below image.

In the Placeholder item, we can map any number of the renderings in Allowed Controls field to show only those renderings available for the respective placeholder. we can see these renderings to be appeared in Popup in Sitecore Experience Editor when we try to add the rendering by clicking the placeholder option.

Once we added the allowed controls, we must add the custom placeholders in Layout item in Layout Service section. Go to “/sitecore/Layout/Layouts/Project/<project_name>/<layout>” and the placeholders like below.

Just to Summarize, currently we are ready with custom placeholders, renderings, and components. I have created simple header.tsx and footer.tsx in local next.js application like below image.

And I’ve added the placeholder entry in Layout.tsx file like below.

<Placeholder> is the special component defined in the sitecore-jss-nextjs package

Let’s add the placeholder settings in App Route template.

We need to add the Placeholder settings in App Route level to see the components are mapping to the respective placeholder. This will be useful to render the component in Page level.

Let’s add the renderings in “home” item like below and map the respective placeholders.

Make sure we have everything in place to render the custom placeholders in home page. Run the below command for connected mode.

jss start:connected        

Go to the home page by clicking https://localhost:3000 and see the header and footer content rendered as expected.

I hope now you will know how to create a new custom placeholder in Sitecore & Next.js.

We will see how to access the customized placeholder differently in Next.js in next article.

Happy Sitecoring!!!