Internationalization is more than translating words

Written by Simeon Griggs

In Episode 17 of the Code && Content podcast, Jan Amann, creator of next-intl, joined me to discuss how his package went from a part-time hobby to the go-to solution for localization in React applications.

next-intl was created from Jan's real-world experience of developing multi-lingual and multi-region applications and having to copy patterns between projects. Eventually rolling up those patterns into the library we know today.

It even supports the Next.js app router, which, based on React server components, required a major rewrite almost a year in the making.

More than words

Localizing a web application is much more than just translating words on the page. You have to think about currencies, dates, regions versus markets, product availability, cultural expectations and more.

Further, you likely want authors to be able to collaborate and constantly update internationalized content, as well as either automating or commissioning translations.

Internationalization involves layers upon layers of complexity which are non-negotiable for multilingual and multi-market companies.

If there is even a slight chance that your web application will require localization at some point later on, it is best to begin with it in mind as early as possible in a project. Adding you first alternative language is far more difficult than adding a third.

Code-first approach

next-intl is designed to promote best-practice developer experience while still giving you the flexibility to localize your app in the way you like. This pairs perfectly with Sanity Studio schema which is defined in code.

A multi-dimensional content model that takes in considerations of language, regions and markets can't be easily defined by clicking around a settings panel. It is best driven by code.

Your language and market settings can be shared between the content model that configures your editing admin panel and the front-ends your users interact with.

There are official plugins available for Sanity Studio to setup localization in the most common way. But as always you are free to customize your content models however you need.

Resources