Localization with Sanity

Seif Ghezala's photo
Seif Ghezala
Posted 2022-09-07 · Updated 2022-09-25 · 4 min

You want to create an international website by either translating content from one language to others or publishing content that is only relevant to a specific locale (explained below).

Let's see how we achieve that with Sanity.

If you prefer video content, you can jump straight to the demo we created to showcase our preferred solution:

What is a locale?

A locale is a value that describes the language and/or country of your target users.

For e.g. the locale en describes English-speaking users, whereas the en-us locale is more specific and describes English-speaking users in the USA.

You can find a complete list here.

Sanity's localization plugin

Sanity provides an official plugin to translate content. You can check out the exakt health case study to see an example on how it's used.

Content translation with Sanity's translation plugin

The plugin works by configuring it with a base locale and a set of other locales you'd want to translate your content to.

Although it works great for translating content, you can't publish content that is specific to a locale other than the base one.

For example, you can't publish a French page without its English content, if English is your configured base language.

Moreover, because of the way the plugin stores translation data, it's hard to implement navigation from one page to its translated version.

Tinloof's solution

International websites are quite common, so we drafted a user-friendly solution that allows our clients to:

  • Translate content
  • Create locale-specific content
  • Make it possible for users to navigate between a page and its translations

To demo the solution, we set up a minimalist Sanity studio with a frontend.

We configured the solution with the following locales: English, Spanish, and French.

Creating a page

Whether it's the homepage or any other website page, you're presented with a locale filter to easily navigate through existing translations.

You can create a page either from the "All" tab by specifying a locale, or from any of the locales' filters with that locale set:

Adding translations

On each translatable content document, there's a "Translations" tab with an overview of the existing document translations.

You can either navigate to a translation or create a new one directly from the tab.

For the demo, we created both a homepage and an about page, and translated both in all languages.

Homepage in Sanity studio
French About us page in Sanity studio

Adding a navigation header

To make it easy to navigate to pages in the demo, we also added a header that is also localizable.

English navigation header in Sanity studio
Spanish navigation header in Sanity studio

Result

You can access the demo here: https://sanity-localization.tinloof.com.

You'll notice that you can easily navigate between translated versions of a page by changing the language.

Frequently Asked Questions

How many locales can I add?

You can configure as many locales as you wish, regardless of your pricing plan.

Can I add locales by myself?

Locales be easily configured from a configuration file which can be altered at any point.

How can I translate content?

You can either translate the content directly on Sanity or use a third-party tool such as Smartcat.

We can also make it possible for you to export your content for translation to the third-party tool directly from Sanity and import it back.

Recent articles

Images and videos on Sanity

Images and videos have to be properly configured to rank in search engine result pages and not impact negatively page speed. In this piece we discuss how we leverage Sanity to easily...
Omar Benseddik's photo
Omar Benseddik
2022-09-18 · 7 min

Analytics with Sanity

We’ll explain in this article the analytics possibilities with Sanity and how we enable them in our projects.
Seif Ghezala's photo
Seif Ghezala
2022-09-12 · 2 min