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).
As a Sanity development agency, Let's see how we achieve that with Sanity, a CMS built with multilingual capabilities in mind.
If you prefer video content, you can jump straight to the demo we created to showcase our preferred solution:
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 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.
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.
International websites are quite common, so we drafted a user-friendly solution that allows our clients to:
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.
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:
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.
To make it easy to navigate to pages in the demo, we also added a header that is also localizable.
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.
You can configure as many locales as you wish, regardless of your pricing plan.
Locales be easily configured from a configuration file which can be altered at any point.
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.