We have already introduced how to add languages in XM Cloud. The language fallback mechanism is an efficient way to manage the addition of languages to a multilingual site. In this article, we will configure and verify the operation of this feature.
Confirmation in the local environment
Open the page for a preview of XM Cloud running locally. By default, accessing https://www.sxastarter.localhost/ will display the page as follows.
If a Japanese page is displayed after adding ja-jp to the URL, the previous configuration is complete and working correctly.
What is language fallback?
Sitecore's content management mechanism is designed to manage a single piece of content in multiple languages. For example, for the top page Home
- Home ( English )
- ホーム ( Japanese )
In this way, one item can have one content in multiple languages. If there is no data between languages, the content can be displayed in another language. For example, if you want to display
- Manage English resources as en
- Manage English resources as en
- Each, if content has not been created, use the content of en
In this way, content in the same language (English in this case) can be used in the locale (region) where the language is used. In addition, when content is created for each locale in each country, the content set in the fallback language will not be referenced.
Set language fallback
We will now activate the Language Fallback mechanism. This time, we will add two settings. First, for Japanese content, if there is no local content, we will call up English content, and second, we will add the language en-US (English US) instead of en (English) to display English content.
Set English as the language fallback for the already added Japanese.
Next, you will need to configure the settings at your site. Referring to the documentation, the following page will appear.
This setting is different for Headless SXA. This is because this site is managed as a Sitecore item. This setting is the target site setting, in this case Settings/Site Grouping/sitecoredemo-jp. Check the Enable item language fallback and Enable field language fallback items as shown below.
Finally, we will make sure that the target item can support fallback. In this case, since we are deploying using the Page template, we will modify the __Standard Values item in this template, and the Enable Item Fallback item is included in the Advanced field that appears when you check View - Standard Field. Enable Item Fallback item is included in Advanced, which is displayed when you check View - Standard Field.
After changing the above settings, this setup is complete if the Home item is enabled.
Operation check
Follow the steps below to create items for verification. First, duplicate the About page as a Sample using Duplicate, and delete the Japanese content, leaving only the English version.
In the above screen also, you can see that it is displayed as Fallback version because there is no Japanese content. If you view the relevant page in the preview mode of the Experience Editor, you will see that the page is displayed and the content is in English.
Add a new language
We have finished checking the operation in Japanese, which has already been set up. Next, we would like to add en-US, and set en as the fallback language as we did for ja-JP.
Next, add the language to the Next.js side as well. The language setting is in the next.config.js file, and although we only added ja-JP last time, we will also add en-US.
JavaScript
i18n: {
locales: ['en', 'en-US', 'ja-JP'],
defaultLocale: jssConfig.defaultLanguage,
localeDetection: false,
},Adding the language, just by adding the locale on the Next.js side, all content will use en. When actually accessing the site using en-US, it is displayed as follows.
We were able to launch the en-US site without adding any specific content.
Summary
We introduced the point that the language fallback feature allows you to first specify the base language for additional languages to be launched. By using this mechanism, it is possible to, for example, release news releases in Japanese and English, and then provide translations in each country's language as needed. At least the English content will be displayed in this format. Used well, it is possible to cover sites in many countries.