The first method handles the /international URL path. The second method forwards the visitor to that path if he or she tries to hit the root.

Define the Messages

When it comes to internationalization, it’s typically handled by putting messages, labels, titles, etc. in properties files. There’s usually a single properties file per language.

The default properties file in this case is called messages.properties. Recall from above that you specified Locale.US as the default locale so you’ll put English text in messages.properties.

home.page.title=This is the English version of this website
home.page.change.header=Change the language
home.page.change.label=Select language
home.page.change.lang.en=English
home.page.change.lang.fr=French
home.page.change.lang.es=Spanish

Once you’ve saved that file, create a new properties file for each additional language that you’ll support. In this case, you need two more files because you’re supporting French and Spanish in addition to English.

Keep in mind that you should save your properties files in /src/main/resources. That’s where Spring Boot will look for them.

Create the Front End

Once you’ve completed saving your properties files, it’s time to work on the front end.

The front-end code is an HTML file that uses Thymeleaf to create dynamic content. Here’s the relevant part of the code that displays a locale-specific title:

<div class="col-md-6 ">
<h1 th:text="#{home.page.title}"></h1>
</div>

Here, the code is reading the home.page.title property from one of the properties files that you just created. It prints out the title in the appropriate language.

How does the system know which properties file to use? It looks at the “lang” paramter in the request URL. If that parameter doesn’t exist, then it defaults to English.

Allow Visitors to Change the Language

Since the purpose of this tutorial is to demonstrate how to display the home page of a website in different languages, it makes sense to enable visitors to change the language. You can do that with a simple dropdown.

Take a cursory glance at that code and you’ll see that it’s referencing a couple of additional properties: home.page.change.header and home.page.change.label. Again, those values are retrieved from locale-specific properties files.

The options in the <select> element also rely on the properties files. They display locale-specific names of different languages (English, Spanish, and French). The user has the opportunity to select any one of those languages from the dropdown.

What happens when the user selects a dropdown? Well, nothing by default. That’s why you need to add a listener.