Adding Languages

So far, we have been working only with English resources if we have not done any particular work on them. In terms of checking resources, if you open the content editor and check the items under /sitecore/system/Languages, you will see that there is only en.

To add Japanese, click on the language button shown on this screen to start the wizard. Select Japanese - Japan here.

Once English (en) and Japanese (ja-JP) have been added, the Sitecore setup is complete.

Prepare a Japanese version of the content.

Checking the language resource for the home item provided as demo data, the version is set to 0 because it does not contain Japanese data.

In this case, we will include the following data.

Next, prepare the Japanese data for the (already used Hero) item in /sitecore/content/sitecoredemo-jp/Components/Hero/HomeData1. The data is as follows.

Since we are here, we would like to deploy the component in Horizon, which we configured last time. First, launch Horizon. Since the user's standard language is English, the following will be displayed.

Click on the language switch in the upper right corner to add Japanese.

When switched to Japanese, Home is displayed but no content is placed.

Here we would like to place the Hero component from the left-hand side item and select an item that we have already prepared. The procedure goes like this here

Sitecore side, content is ready.

Update Project

For language settings, simply change the settings in the file next.config.js. By default, en and da-DK are set.

  i18n: {
    // These are all the locales you want to support in your application.
    // These should generally match (or at least be a subset of) those in Sitecore.
    locales: ['en', 'da-DK'],
    // This is the locale that will be used when visiting a non-locale
    // prefixed path e.g. `/styleguide`.
    defaultLocale: packageConfig.language,
  },

Since Danish is not used in this project, please change this to ja-JP, which means Japanese. After the change, run the project with jss start and access localhost to see the page in Japanese.

Japanese pages are displayed because the browser language is set to Japanese, so the behavior is to automatically display Japanese pages. For reference, if English is at the top of the locale, English content will be displayed.

You will notice that the font size on the Japanese page is too large for the English-based font size. Therefore, we will change the font size. In this case, we will change the font size of h1.

            <h1 className="text-4xl tracking-tight font-extrabold text-gray-900 sm:text-5xl md:text-6xl lg:text-5xl xl:text-4xl">
              <span className="block xl">
                <Text field={props.fields.title1} />
              </span>{' '}
              <span className="block text-indigo-600 lg">
                <Text field={props.fields.title2} />
              </span>
            </h1>

After adjusting the font size, it looks better in both Japanese and English.

Now that you have updated the components and changed the language settings, you can submit against GitHub. Once the build is complete, you should now see the page in Japanese as shown below.

Summary

This time, we have added Sitecore's language settings to support Japanese resources as well as templates. This allows for multilingual content management while using the same layout in Sitecore.

Tags

• Next.js