Posts

Showing posts with the label NextJs XM Cloud

Configuring GraphQL and Running your first query in XM Cloud NextJs App using ContentSDK

Image
While working on real-world Sitecore projects, there are many scenarios where you need to fetch global content values that are reused across the entire site. Although we can retrieve item field values from data source items inside components in Next.js, there are times when we need to fetch content directly from the Sitecore CMS rather than through a component’s data source. One of the most recommended approaches for this requirement is to execute GraphQL queries which use the Sitecore Edge API under the hood and return data in a strongly-typed schema. In this blog, I will explain how to configure and execute GraphQL queries in a Next.js application using the Sitecore Content SDK . About Sitecore ContentSDK Sitecore XM Cloud brings a headless, API-first approach to content delivery. While GraphQL queries can be executed directly through Edge endpoints, Sitecore has introduced the Sitecore Content SDK to make this development experience even easier. The Sitecore Content SDK is a l...

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...

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...

Unfolding guide to setup JSS Next.js App in XM Cloud

Image
  In this guide, I will explain how you can setup your Next.js app in XM Cloud using XM Deploy App. The main motive is to reach at a point where we will be creating and using Components created using XM Cloud component builder and along with that Custom Component in Next.js app Recently, I have configured a new site, which un-covered some key points we need to consider while site setup. https://portal.sitecorecloud.io/ Prerequisites You should have a XM Cloud account with Organization Admin or Organization Owner role access. A Valid Sitecore XM Cloud License. A Current and Compatible version of Node.js. A suitable Integrated Development Environment (IDE) such as Visual Studio Code. Github or Azure DevOps working account. Git installed, so handle push and pull. Setup Site in XM Cloud So lets begin step by step. Step 1: Login into your XM Cloud portal and Click on XM Cloud Deploy   Step 2: Click on Create Project   Step 3: Give a name to your project...