Tailwind Logo

Use multilingual content on your site

XM Cloud

Published: 2023-12-04

In the previous article, we introduced the settings for holding multilingual data in content management. Now let's see how it works when actually displaying the data, referring to the Next.js project.

About routing

First of all, Next.js comes standard with routing for handling multiple languages.

For the XM Cloud sample, the next.config.js file is written as follows (comments removed)

JavaScript
  i18n: {
    locales: ['en'],
    defaultLocale: jssConfig.defaultLanguage,
  },

It only specifies English as the locale and has no other language definitions. Change this setting as follows

JavaScript
  i18n: {
    locales: ['en', 'ja-JP'],
    defaultLocale: jssConfig.defaultLanguage,
    localeDetection: false,
  },

We increased the language part and set it to localeDetection. localeDetection is a function that looks at the browser's locale and switches it, but this time we will turn it off and proceed. First, let's run the program in the local environment.

xmclocal04.png

Japanese content is now displayed when the locale is entered in the URL.

Deploy to Vercel

The code with the above changes is extracted to GitHub and the site is built again with Vercel. Once complete, you should now see the target language with the locale in the URL.

xmclocal05.png

Summary

We were able to confirm that the locale part is not a Sitecore-specific implementation, but uses the routing mechanism that Next.js has.

Related article

Tags