Simply copy and paste the following command line in your terminal to create your first Strapi project.

Get Started

Have you ever visited a site and notice that it is not in your native language or any language you speak and understand. It can be frustrating and disappointing at the same time. You will be left with only two options in those moments, walk away, or find a way to translate the site. 

Not being able to read the contents of a website due to differences in language is a massive flaw in the user experience. This experience is not what you wish for your users if you are a Strapi admin or own a Strapi website.

Strapi has a solution for this. The i18n localization Strapi plugin shipped together with version 3.6.0 or higher handles this effectively. Here's [how to build applications for an International Audience Using Strapi i18n Plugin](https://strapi.io/blog/building-applications-for-an-international-audience-using-strapi-i18n-plugin). Now let's take a moment to explore the customization of this plugin and some of its best practices.

## Localization and internationalization (i18n and L10)

i18n and L10n are abbreviations for Internationalization and Localization, respectively. Internationalization and Localization are software development techniques that aim to serve content to users in the language they understand without making engineering changes. The process involves translating content into different languages and even restructuring pages to suit users. 


### Differentiation and use
****
Often Localization and Internationalization are used interchangeably, but they are not the same. There is a difference between the two terms. 

The difference is a straightforward one. 

**Internationalization is the process of developing software with the interest of the international community at heart. It involves making software adaptable to the various languages and regions without making engineering changes, while Localization adapts internationalized software to focus on a particular part**. 

I can do this by translating text and adding relevant components specific to a particular local. It is only internationalized software that can localize.


## Localization in Strapi

Localization, as with many other site admin responsibilities, has been simplified for Strapi users. To implement Localization in a Strapi application, you need to install and properly configure the Strapi i18n plugin. 

Strapi applications running on version 3.6.0 or higher do not need to install this plugin as it is shipped with it already. If your application is running on a version of Strapi lower than what we have here, you can consider migrating your application. If you do not know how to click [here](https://docs.strapi.io/developer-docs/latest/update-migration-guides/update-version.html#upgrade-your-dependencies). You can also install the plugin using **NPM** or **Yarn** commands:

```
    yarn strapi install i18n
    or
    npm run strapi install i18n
```

The i18n Strapi plugin requires some configurations to take effect. Let's walk through the steps involved in implementing this plugin.


### How to implement it

To properly understand this, we need some hands-on experience. We will get started by creating a new Strapi project using the following command.

```
    yarn create strapi-app my-project --quickstart
    or
    npx create-strapi-app my-project --quickstart
```

After a successful installation, Strapi will automatically run and launch the project on your browser, where you will be required to create an admin account.


![](https://paper-attachments.dropbox.com/s_75763409C2F676A56666F5A72B9E5F7A23BC73D4BF13033A6B3418E998DD3AF1_1620218998175_register.PNG)


After successfully creating the account, it should redirect you to your Strapi dashboard. 

i18n is a Strapi Plugin and can be found in the plugin list if you have the correct version of Strapi installed. Click on **General**→**Plugin** to ensure you have the plugin installed in your project.



![](https://paper-attachments.dropbox.com/s_75763409C2F676A56666F5A72B9E5F7A23BC73D4BF13033A6B3418E998DD3AF1_1624889653682_2021-06-28+10_09_59-i18npluginPage.png)


Next, we need to activate this plugin and create new Locales. To do this, click on **settings→Internationalization→add Locale.** 

![](https://paper-attachments.dropbox.com/s_75763409C2F676A56666F5A72B9E5F7A23BC73D4BF13033A6B3418E998DD3AF1_1624913267598_2021-06-28+10_58_48-creatinglocal.png)



Let us add a new locale to test out. I'll add a new french locale. The process is simple. Click on **add a locale→select Locale from the dropdown→save**.


![](https://paper-attachments.dropbox.com/s_75763409C2F676A56666F5A72B9E5F7A23BC73D4BF13033A6B3418E998DD3AF1_1620378814253_frenchLocal.PNG)


Now we need some content to test out the wonders of Localization in Strapi. To continue, we need to create a content type and add some content to it. 

If you are new to Strapi and do not yet have a perfect understanding of these concepts mentioned above, Click [here](https://docs.strapi.io/developer-docs/latest/getting-started/quick-start.html#_3-create-a-restaurant-content-type) for more details from the Strapi documentation.

### Create a collection type

Let's create a Post content type. Click on **Content-type Builder→to create a new collection type** in the plugins section on the right navigation menu. 


![](https://paper-attachments.dropbox.com/s_75763409C2F676A56666F5A72B9E5F7A23BC73D4BF13033A6B3418E998DD3AF1_1620384576736_ContentType.PNG)


Next, we have to fill out the form, select all the necessary fields we want our Post type to have. In our case, our Post content type will have :


- Name: This will have a type of string
- Body: This will have a type of rich-text
- Date: This will have a type of Datetime

After adding these fields, click Save, and you should have a Post data type in your project.


![](https://paper-attachments.dropbox.com/s_75763409C2F676A56666F5A72B9E5F7A23BC73D4BF13033A6B3418E998DD3AF1_1624913759891_nameOfPost.png)



![](https://paper-attachments.dropbox.com/s_75763409C2F676A56666F5A72B9E5F7A23BC73D4BF13033A6B3418E998DD3AF1_1624914577647_NameSave.png)


Repeat the process in the image above for the rest of the fields. Then Save. After saving, we should have a newly created collection type of Post.  

Now we need to create our first post content and then look at creating the same Post in different languages or locales with Strapi. Create a new post by Navigating to the Post collection and click on the create new post button. 

![](https://paper-attachments.dropbox.com/s_75763409C2F676A56666F5A72B9E5F7A23BC73D4BF13033A6B3418E998DD3AF1_1624919549434_savepost.png)

We have successfully created our Post collection and our first Post. Let's take a look at how to serve this published content (Post) in different locales. To do this, we need to Edit our Post collection type to enable Localization.


![](https://paper-attachments.dropbox.com/s_75763409C2F676A56666F5A72B9E5F7A23BC73D4BF13033A6B3418E998DD3AF1_1624920262060_localizationInPostType2.png)


We thank the Strapi development team for their hard work, making Localization very easy to achieve. Some of the excellent features they built into it including:


- Easily edit Post 
- Import content from a previous local into the newly created Locale
- Some fields can be set not to change no matter the Locale
- Editing or creating a unique page structure for a particular locale

Let's explore some of these features above by making our first Post available in french. Click **Post→select a Post→click edit.** On the editing page, locate **Internationalization** in the right corner. 


![](https://paper-attachments.dropbox.com/s_75763409C2F676A56666F5A72B9E5F7A23BC73D4BF13033A6B3418E998DD3AF1_1624920874672_language.png)


Now let's create our first french copy of this Post by clicking French on the dropdown. 


![](https://paper-attachments.dropbox.com/s_75763409C2F676A56666F5A72B9E5F7A23BC73D4BF13033A6B3418E998DD3AF1_1624921284223_importFromLocal.png)


Notice the *Fill in from another locale.* It is helpful. When you click on it, It fills in the Post's content from the previous Locale, which happens to be English in our case. This way, you can easily edit into the current language you want. 

In my case, I used google translator to get a French translation of the content of my test post, as you can see in the image below. The main point to note here is that Editing your Post into a new language becomes a lot easier, especially if you are multi-lingual. 


![](https://paper-attachments.dropbox.com/s_75763409C2F676A56666F5A72B9E5F7A23BC73D4BF13033A6B3418E998DD3AF1_1620389396866_French.PNG)


Once you save the Post, it becomes available in English and French, which is fantastic. One more thing you can do is disabling Localization in parts of the Post that you want to retain the default language.

We have to edit the Post content type and disable Localization for this field. Let's disable Localization for **the Name** field in our Post. Click on **Edit the fields→edit→advanced setting→disable Localization.** 

The images below explain more.


![](https://paper-attachments.dropbox.com/s_75763409C2F676A56666F5A72B9E5F7A23BC73D4BF13033A6B3418E998DD3AF1_1624922567657_FieldNotLacalised.png)


click on


![](https://paper-attachments.dropbox.com/s_75763409C2F676A56666F5A72B9E5F7A23BC73D4BF13033A6B3418E998DD3AF1_1624922909318_FieldNotLacalised2.png)


And finally

![](https://paper-attachments.dropbox.com/s_75763409C2F676A56666F5A72B9E5F7A23BC73D4BF13033A6B3418E998DD3AF1_1624923680878_localizationInPostType3.png)


We can further edit the page of our French Local to look unique. We can add features that won't be there in the English local. I find this very useful. 

### Using the API

You can leverage the beauty of Localization even when working with Strapi content API. We can fetch content specific to a particular locale and do plenty of other cool stuff with the API.  

Let get right into it. For this tutorial, I will be using [Postman](https://www.postman.com/) to interact with my Strapi application.

**Getting Localized** **contents**

With the `locale` API parameter, we can fetch data belonging to a particular locale. You should pass the locale code along with the call as a parameter. The request should be a `GET` request. With that said, let's try making a call to the endpoint using Postman.


![](https://paper-attachments.dropbox.com/s_75763409C2F676A56666F5A72B9E5F7A23BC73D4BF13033A6B3418E998DD3AF1_1620404309446_postman.PNG)


 
 Okay, a few things to note here. Notice the URL we made the call to `localhost:1337/posts?_locale=fr-FR` . The `/post` is the endpoint to fetch posts from our Post collection. We added a prefix of `_locale` which specifies that we want to fetch contents from a particular locale. `fr-FR` is specifying that we want to fetch Post from the French locale. 
 
 Okay, a few things to note here. Notice the URL we made the call to `localhost:1337/posts?_locale=fr-FR`. The `/Post` is the endpoint to fetch Post from our Post collection. We added `_ locale`, which specifies that we want to fetch contents from a particular locale. `fr-FR` is determining that we want to fetch Post from the French Locale. 
 
If you attempt making this request with Postman at this point, you will get an error with an error message like the one we have below. 
 
Take a look at the response body, and you will notice that the request returned a forbidden error. 
 
```
    {
        "statusCode": 403,
        "error": "Forbidden",
        "message": "Forbidden"
    }
```


This script is a permission error. We need to edit our post collection to accept requests from unauthenticated users for this tutorial. To do that, click the **settings→roles→permission→application**.


![](https://paper-attachments.dropbox.com/s_75763409C2F676A56666F5A72B9E5F7A23BC73D4BF13033A6B3418E998DD3AF1_1624953319667_authPermission.png)



Here you can choose who should have access. Once more, for this simple tutorial, I will select all. 



![](https://paper-attachments.dropbox.com/s_75763409C2F676A56666F5A72B9E5F7A23BC73D4BF13033A6B3418E998DD3AF1_1624954067217_authPermission2.png)


With this done, let's head over to Postman and make the call again.


![](https://paper-attachments.dropbox.com/s_75763409C2F676A56666F5A72B9E5F7A23BC73D4BF13033A6B3418E998DD3AF1_1620405862995_postman2.PNG)


Now our request is successful. Do you notice we fetched the French version of the Post, which is what we want? 

Note that you should have added this Locale in question to fetch a post in this manner already from the Strapi dashboard or using the API.

**Creating a new localized entry**
We can create a localized entry for a post using the content API. We can do this by sending a Post request to content API. The request should contain a `locale` parameter that will point to the new Locale we intend to create. 

The code snippet below is an example of how a localized post request should look.

```
    {
      "name": "She's Cake",
      "description": "She's Cake restaurant description in French",
      "locale": "fr"
    }
 ```


If you requested without the `locale` parameter, the request would create the Post in the default `locale`. The code below does not contain a locale parameter. This script will create this Post in English, which is the default locale in our case. 

```
    {
      "name": "Oplato",
      "description": "Oplato restaurant description in English"
    }
```


With this said, let's get our hands dirty. Let's create a new locale through Strapi API using Postman. We will send our request to the `Posts` endpoint.


    localhost:1337/posts


![](https://paper-attachments.dropbox.com/s_75763409C2F676A56666F5A72B9E5F7A23BC73D4BF13033A6B3418E998DD3AF1_1620644084529_createCollection.PNG)


As you can see, I have successfully created a post to a new locale using the API. We have just scratched the surface of how you can leverage Localization using the API. For a more detailed guide on how to carry out localization tasks using the API, click [here](https://docs.strapi.io/developer-docs/latest/plugins/plugins-intro.html#usage-with-strapi-content-api).

 

## Best practices/benefits of i18n in Strapi

Some best practices that I can recommend when working with Strapi include the following:

- Browse contents by locales
- Edit pages or Post in locales and switch between them easily
- Choose what Locale should be displayed first
- Keep some contents the same for all locales
- Handle editors and writers according to Locale

## Conclusion

Wow, I'm glad you read through to the end. By now, you should:

-  Have a better understanding of Localization and Internationalization (i18n and L10)
- Be able to implement Localization in Strapi from the dashboard and the API, respectively
- Get tips on some best practices when implementing Localization in strapi

P.S. If this is your first time hearing about Strapi, I'll give you a head start. Strapi is an open-source headless CMS built with Node.Js and React.Js. You can consume the API with any front-end framework of your choice. 

It adopts Jamstack (A modern web development architecture based on client-side JavaScript, reusable APIs, and prebuilt Markup). Check the [documentation](https://docs.strapi.io/developer-docs/latest/getting-started/quick-start.html#_1-install-strapi-and-create-a-new-project) for more information on Strapi.





The Tutorials section covers an introduction to Strapi, some advanced technical content, product updates and releases. From basic workaround to in-depth development guides. 

Tutorials

medium_Strapi Custom Plugin-18.jpg

small_Strapi Custom Plugin-18.jpg

thumbnail_Strapi Custom Plugin-18.jpg

Strapi Custom Plugin-18.jpg

The Product section covers our releases, feature reviews and more. 

Product

The Ecosystem section covers everything related to the world of Headless CMS and Strapi's place in it. 

Ecosystem

The latest Strapi-related news and major events happening for Strapi – including announcements, remote-work, organization and tips on running a start-up. 

Company

Get all the latest updates, news and events.

Subscribe to the newsletter 📣

Speak your customer's language! Now you can create multilingual websites or apps in Strapi with the new internationalization feature.

i18n blogpost cover (1).png

Announcing Strapi v3.6 with Internationalization

In this tutorial, we will build a News app using Strapi and React.js. We will use the new Strapi i18n plugin to translate the backend content from a language to another.

Strapi Guided Tour-3.png

Build a News app using React.js, with i18n API in Strapi

Learn what Internationalization is and how you can implement it in a Strapi application using i18n plugin in this step by step tutorial.

Strapi Custom Plugin-20.jpg

Building Applications For An International Audience Using Strapi i18n Plugin

You have been asking for it, we have developed it! **[Internationalization](https://portal.productboard.com/strapi/1-roadmap/c/19-content-internationalization-ce-ee-v3) (i18n) is now available in Strapi v3.6**. For free and without limitations. Read on to learn what's new 📢

## Create multilingual websites or apps
From now on, you can **create and manage content in multiple languages and for multiple locales in Strapi.** A locale may represent not only a language but also a country to which the exact version of your content is related (for example, en-GB for English language and Great Britain, or fr-CA for French and Canada). Translate the content of your website or app into other languages and reach more audiences in different countries. 

<iframe width="560" height="315" src="https://www.youtube.com/embed/PKnJhcwhORE" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

## Personalize and localize content
Content localization is not only about translating the text, it’s also about **customizing the messages and content you deliver to each target audience taking into account their language and geographical location**. 

Customize the content that is displayed for each locale of your content types. For example, if you’re developing an e-commerce platform, you can select what product pages are displayed on a French, Portuguese, or Mandarin version of a website. 

## Set up efficient publishing workflows
Managing many languages in one admin panel may sound like a challenging task, but we took care of that. Here are some details that matter:

-   **Browse content by locales**

In the list view, you can see all the content of one locale and **easily switch between locales to see all related entries.** For example, if you open the list of articles on your website, you will only see the entries in English and can switch between locales to see the entries in other languages. It gives you a better overview of the content available on different versions.

![list_view_i18n crop.png](/uploads/list_view_i18n_crop_b0e66770d0.png)

When editing content (for example, a particular article on a website or a product page), you can switch between different locales and **automatically copy and paste content from one locale to another.** No need to open a million tabs :) 

![content-manager_translate.png](/uploads/content_manager_translate_cd4901fcaf.png)

-  **Choose what locale should be displayed first**

You can **set up a default locale**, which will be displayed whenever you add content to a new content type or when you open the list of entries. Having a default locale makes it more comfortable to create and edit content. 

![settings-i18n.png](/uploads/settings_i18n_de4b0a9168.png)

-  **Keep some content the same for all locales**

If some content on your website or app should be the same no matter in which language the website is, you can **disable localization for any field or content type.**

This way, when you create a new version, the non-localized fields will already contain content. If you edit the entries of non-localized fields, they will be updated in all locales automatically. This saves a lot of time when making updates or adding new versions. 

-  **Collaborate effectively with granular permissions**

Finally, you can grant granular CRUD (create, read, update, delete) permissions for each locale to different admin panel roles & users, no matter if they are translators, content editors, marketers, country managers, etc. 

Since internationalization is integrated with the [Draft & Publish system](https://strapi.io/blog/announcing-a-new-draft-and-publish-feature), you will have full control of who can access, modify and publish entries in different locales. Total security and efficiency! 💯

![CT_cropped.png](/uploads/CT_cropped_a3a93357f3.png)

Here’s a video guide on how to use internationalization in the admin panel: 

<iframe width="560" height="315" src="https://www.youtube.com/embed/TOixZFCwe2U" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

## API evolution

We have updated the API to fetch content by the locale, which means you don't have to fetch all the content at a time. A ```localizations``` field is added to every content type when the internationalization feature is activated. If a developer creates an entry from the API, it's possible to specify the locale for which an entry should be created. It is also possible to create new locales from an existing entry.

Here's an example of a REST API call:
![codei18n.png](/uploads/codei18n_60b31a78f1.png)

## Try Internationalization (i18n) out

**Update your Strapi project to version 3.6** or ask your tech team to do it. Have a look at the [developer documentation](https://docs.strapi.io/developer-docs/latest/plugins/i18n.html) and [user guide](https://docs.strapi.io/developer-docs/latest/plugins/plugins-intro.html) to see more step-by-step instructions on how to use the new feature. 

Since internationalization is a plugin, you need to enable it in settings after updating the project to v3.6. Once you enable the feature, all the existing content will be associated with the default locale (it is set to English but you may change it to any other locale and the content will be migrated).

## New to Strapi? Give it a try

**Strapi is a free flexible open-source headless CMS.** You can build a project using one of the [starters](https://strapi.io/starters) from our library or create a new Strapi project on your computer by running the quickstart command:

``` npx create-strapi-app my-project --quickstart ```

Interested to see what is the content management experience in Strapi? Check out our [hosted demo](https://strapi.io/demo) with sample data to see what it's like to add and manage content in Strapi and try out the editorial features.

## Online Meetup: i18n feature demo

![Online Meetup i18n.png](/uploads/Online_Meetup_i18n_51aa4dc7b1.png)

In this Online Meetup, our Developer Advocate Daniel demonstrates the internationalization feature, shows how to manage locales and how to use the plugin on both REST and GraphQL APIs. 

Alex, our Engineering Lead, also answers some questions on the upcoming Strapi v4 and future versions.

**Get access to the recording through the form below**
<iframe width="100%" height="360" frameborder="0" src="https://app.livestorm.co/p/1aeeacbe-2ed2-4831-9570-03682e7dd859/form" title="What’s new in Strapi v3.6: Internationalization and more | Strapi"></iframe>

 ## Thanks to all contributors
Strapi is a product built together with more than [600+ contributors](https://github.com/strapi/strapi/graphs/contributors). We would love to say thank you to people who contributed to the v3.6 release as well to the previous v3.5 enhancements and bug fixes: 
[@MattieBelt](https://github.com/MattieBelt), [@violabg](https://github.com/violabg), [@jonmol](https://github.com/jonmol), [@dani832m](https://github.com/dani832m), [@yuriburk](https://github.com/yuriburk), [@germangonzo](https://github.com/germangonzo), [@ognjenjevremovic](https://github.com/ognjenjevremovic), [@bidoubiwa](https://github.com/bidoubiwa), [@brettwillis](https://github.com/brettwillis), [@henk23](https://github.com/henk23), [@ScottAgirs](https://github.com/ScottAgirs), [@pasha42](https://github.com/pasha42), [@maggie0002](https://github.com/maggie0002), [@dlebech](https://github.com/dlebech), [@sebastiangorski](https://github.com/sebastiangorski), and [@bvolz](https://github.com/bvolz).

## What else in the latest Strapi releases

In case you have missed our recent updates, here are some recent updates: 
-   [Starters CLI release](https://strapi.io/blog/announcing-the-strapi-starter-cli)

-   [Sentry plugin for Strapi](https://strapi.io/blog/introducing-sentry-plugin)

-   [SSO Authentication for admin panel](https://strapi.io/blog/v3-5-sentry-plugin-sso-authentication)

Check out our [changelog](https://strapi.io/changelog) to have more information about all the updates and fixes.

## Build Strapi with us

Strapi is an open-source product that grows thanks to community support and contributions.

Here's how you can help us improve the product:
-   Contribute to the project on [Github](https://github.com/strapi/strapi/blob/master/CONTRIBUTING.md)

-   Share what features you'd love to have in our [public roadmap](https://portal.productboard.com/strapi/1-roadmap/tabs/2-under-consideration)

-   [Create a Strapi template](https://docs.strapi.io/developer-docs/latest/setup-deployment-guides/installation/templates.html#creating-a-template) for a specific use case

-   Showcase the projects you built with Strapi in [Awesome Strapi](https://strapi.io/showcases)

We appreciate each contribution and piece of feedback that you share. Stay safe and tuned for more updates!



Join our Newsletter

 i18n implementation and Best Practices in Strapi

thumbnail_22731000.jpeg

22731000.jpeg

Anumadu is a fullstack engineer, but also a technical writer specialized in Laravel, Vue.js, Nuxt.js and Node.js.