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