Posts

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

Image
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 o...
Post a Comment
Read more

Sitecore XM Cloud: Enabling language fallback with Keynotes on Configurations

Image
Language fallback is a powerful feature provide by Sitecore, that allows showing the content in the set fallback language if the content is not found in current language. Example, if you have setup your site in 2 languages in which English will be the default and other as Arabic, with Language fallback settings are enabled, if content for Arabic language is not created and accessed then English language content will be use instead. According to me, the best feature it offers is that it lowers down the risk of showing 404 Page not found error if any page content is not available in secondary language due to any reason. In this blog, I would show you how you can enable these settings in XM Cloud CMS along with creating the patch and show you how it works. In case if you are seeking any documentation on How to add additional Language in your XM Cloud site, then you can follow this blog . Types You can setup Language fallback setting in 2 ways: On Item Level I recommend usi...
Post a Comment
Read more

Complete Guide: Multilingual Setup in Sitecore XM Cloud with Next.js JSS

Image
Sitecore XM Cloud: Enabling Multiple Languages for Global Websites and Involved Configuration In today’s digital era, building platforms that cater to diverse audiences is no longer optional — it’s essential. When we talk about global community, they would like to view the content in their regional language. Seeing this requirement and working in Sitecore XM Cloud, we had an option to add content in multiple languages. However, to use this feature you need to do some configurations. In this part of blog, I will try to explain How you can add new Language in XM Cloud and how you can configure the locale according to your requirements. In second part, I will discuss how you can setup language fallback in XM Cloud with necessary steps. Adding Language You can add the Language in 2 ways. Although you get the option to add the additional language while setting up the site initially like below:   But if you skipped that then you are left with 2 options. One is from Conten...
Post a Comment
Read more

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

Image
  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 Valid XM Cloud login. Site must be created on XM Cloud. Nextjs-starter project must be cloned and in running state. Code Editor with Git must be working. Set up Data Template Step 1: Goto Templates and reach to your site collection folder. In m...
Post a Comment
Read more