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

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 Content-Editor and other is from XM Cloud App.

Adding Language using XM Cloud App

Step 1: Goto your site app

Step 2: Goto Settings Tab

Step 3: Click Add Language

Select the language you want to choose and click Add. Make a note of Language Code, in my case it is ar-AE. In later stages I will show if you want to configure it to “ar” but that is completely optional.

Adding Language from Content Editor

You can add language from Content Editor as well.

Step 1: Go to content Editor

Step 2: Goto System

/sitecore/system/Languages

Step 3: Add New Language Item

Step 4: Add Language Code

In both the ways your language will get added.

Make a note of Fallback language is set to “en”. I will discuss it later.

Add Content Item

Once your language is added now you are ready to add the Items for another language. You can start with creating the new version of Page Items.

Step 1: Switch to Page item and switch to Second language.

Create a new version and provide the Title.

Similarly, if you are fetching any data for your components from data source item then create their second language version and feed the data.

Configure NextJs App

Step 1: Changes in configuration files

You need to configure 2 files Redirect.ts and next.config.js

Add the new locale ‘ar-AE’.

Step 8: Start your localhost and open the url

In my case, I have configured on some other page item along with Component which shows content from data source item, You can test on home page item instead.

Configure Locale in NextJs App

What if you want to keep the language code just as “ar” instead of “ar-AE” 

i.e https://{url}/ar/{suburl}

Since all language have country/region code to do this re-name the existing Language item may require some changes.

Step 1: Rename the existing Language Item

Rename ar-AE to ar

Since it is valid locale, Sitecore will allow to rename the item. But, this action will actually create a new Language for those items

Step 2: Rename the locale in NextJs app as well, in both files.

Suggestion:

If you want to remove items created for previous language i.e ar-AE, then you can create a new language in /settings/language for ar-AE and then try deleting that item.

So, my suggestion is if you want to rename the locale, then you might need to do in early stages of development otherwise it can cause serious data loss.

So final results will be like below:

Above is the screenshot after I have deleted the original language item.

Now you are ready to add content for “ar” language.

Conclusion:

In this blog I tried to show how you can add the language and on greater note how you can configure the locale in XM Cloud and NextJs App.

In my next blog, I will uncover the facts which you should know while setting up fallback language.


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