Developing Multilingual sites with Headless CMS - Strapi

Over 4 billion people are using the internet today. It is used by different businesses (like e-commerce, social media, etc.) for attracting more customers. Every business is going online (especially during this pandemic) with the notion of gaining the upper hand on the competitors with different marketing strategies.

One of such marketing strategies is Multilingual websites to attract more customers, by catering to different demographics.

What is a Multilingual website?

As the name suggests, a multilingual website is a website that has content in more than one language. 

Benefits of Multilingual websites

• English is not the only language:

English might be the most widely spoken language globally but there are other well-known popular languages like Mandarin, Spanish, etc. A website that displays its content in more than one language is reachable to more people comparatively.

The most common languages used on the internet as of January 2020, by the share of internet users are - 

Source: Statista
 

• Everyone loves their native language:

Human beings have a special regard for their native language even though they can speak and read English well enough and it is a normal thing. Similarly, if the website displays content in the region’s native language, it will connect with people easily. It also shows that your business truly cares about the non-English speaking customers and their language is just as important.

The most spoken languages worldwide in 2021:

Source: Statista
 

• More customers mean more sales:

As you develop your website in multiple languages, your target audience is getting bigger. There will be an increase in the number of customers and as a result, the sales will also increase. 

• A different approach from competitors: 

There is a famous quote by Dr Seuss:

Why fit in when you were born to stand out?

No matter what your business is, it faces market saturation and huge competition these days. A multilingual website is a great way to stand out from your competitors.

• Search engines: 

On Google, there are a lot of languages to choose from. If you have a multilingual website then search engines will show your website’s result in the user’s preferred language.

Now the question arises of how can we make our website multilingual. There are a lot of options available in the market but today we are going to discuss how we can achieve this with Strapi (Headless CMS).

What is a Headless CMS?

A Headless CMS is a back-end-only content management system where the content is built from the ground without its head, which is the front-end. It makes the content accessible via API for display on any device.

What is Strapi - Open Headless CMS?

Strapi is one of the most popular open-source Headless CMS right now. It has more than 35k stars on Github with growing popularity each day. Strapi enables content-rich experiences to be created, managed, and exposed to any digital product, channel, or device. It gives a very user-friendly experience that you can stack up with any technology. Please check out their Github repo below:

https://github.com/strapi/strapi

The current scope of Multilingual website with Strapi

There is no plugin available for making a website Multilingual. As per the below road map, the plugin is still in the testing stage and according to the recent update, it will either be launched at the end of Q1-2021 or might get postponed by a few weeks into Q2-2021.

Roadmap link: 19-content-internationalization-ce-ee-v3

Building a multilingual website with Strapi

• Building the back-end with Strapi:

Firstly we need to do the local setup for Strapi. Please follow the instructions mentioned in the guide: Installing from CLI 

URL: http://localhost:1337/admin/

• Creating the collections in Strapi:

Step 1 - On the left panel of the dashboard, click content-types builder, it will give you an option to create new collections. Click on it and name the collection as ‘article’ and click continue.

Step 2 - It will now ask you to add fields for the collections. Since we are building a multilingual website, we will specify each field name with the language code as a suffix in the field name just to differentiate between each language.

For eg: If we need to specify the field ‘title’ for the English language then the field name can be mentioned as  ‘title_en’. In the same way, we can mention the Hindi language as ‘title_hi’.

Likewise, we need to add the title and description along with the language code as the suffix for the field name. After adding all the fields, click Save. 

Here is the list of all field names created for this multilingual website:

We are using 4 languages here English(en), Hindi(hi), French(fr) and German(de). Article collection will have the following fields:
 

 Step 3 - Now, let’s add a few articles to the created collections. In the left side panel, under collection types, click on ‘Articles’ and then click on add New Articles.

Now as per the defined language suffix, type the content in its specific language field as shown below:

Title_en: Munnar Travel Blog – Tourist Places

Title_hi: मुन्नार यात्रा ब्लॉग - पर्यटक स्थल

Title_fr: Munnar Travel Blog - Lieux touristiques

Title_de: Munnar Reiseblog - Touristenorte

The same needs to be done for Description fields as well. This will help in distinguishing different languages to display in the front-end by using their field name. We can easily differentiate with the help of the language code provided in the Suffix. 

The full approach for adding an article is below:

Step 4 - After adding a few articles, we need to provide the ‘Article’ collection permission to send the API requests to fetch the data from Strapi. For That Click on settings > Roles > Public.

Scroll down to the Permissions and check the find and findone boxes. Save it and we have successfully given permissions to our Article collections. 

• Building the front-end using React

1. Fetching data from Strapi.

App.js:

useEffect(()=>{
   //Fetching Data from Strapi
   const getPosts = async () => {
     const response = await fetch('http://localhost:1337/articles')
     const data = await response.json();
     console.log('useFFect Data:', data)
     setPosts(data)
   }
  getPosts()
},[])

Here we are fetching all the data from the Strapi using the URL ‘http://localhost:1337/articles’ and then feeding the JSON data to our header component as props.
 

index.js(Header Component):

The data from App.js is used here as props to display the content in multiple languages.

const Header = (data) => {
....
} 

Now, we’ll handle the multiple languages by creating a Header for our blog.

<div className="main-header">
<div className="header-container">
 <div className="title">
     <h2> BlogPost </h2>
 </div>
 <div className="languages-wrapper">
  <FormControl component="fieldset">
<RadioGroup aria-label="language" name="language" value={value} onChange={handleChange} row>
      <FormControlLabel value="English" control={<Radio />} label="eng" />
      <FormControlLabel value="Hindi" control={<Radio />} label="hi" />
      <FormControlLabel value="French" control={<Radio />} label="fr"/>
      <FormControlLabel value="German" control={<Radio />} label="de"/>
   </RadioGroup>
  </FormControl>
 </div>
</div>
</div>

‍

Here, we have created 4 radio buttons for each language (English, Hindi, French, and German) and on selecting any one of the languages, our content will display in that particular language.

   const [value, setValue] = useState('English')
   const handleChange = (event) => {
     setValue(event.target.value);
     console.log('Values:', event.target.value)
   }

Here, the default selected language will be English and if the user selects any other language our function handleChange will get invoked and the useState hook will set the new value for that language code. With this, the page will start showing the content in that language.

Final Website

Conclusion

In this tutorial, we have learned how to build multilingual sites with Strapi. We first started by developing our back-end with Strapi and added collections with articles, then we went on to build our front-end with React to display content fetched from Strapi. You can access the complete code of this tutorial on Github.

Github Links

Backend: multilingual-with-strapi-backend.git

Frontend: multilingua-with-strapi-frontend.git