Next.js internationalization (i18n): Going international with next-intl • 19 min read
While English is known to be the lingua franca of the web, when you look at the the top languages by number of native speakers, the result looks fairly more diverse:
1. Chinese (1.3 billion native speakers)
2. Spanish (485 million native speakers)
3. English (373 million native speakers)
4. Arabic (362 million native speakers)
5. Hindi (344 million native speakers)
With language being the foundation of communication, it’s clear that if you want to make your web content available to an international audience, you can enhance the user experience by supporting more than a single language. Internationalization, often abbreviated to i18n, furthermore allows your business to expand globally and enter new markets.
In this article, we will explore the process of adapting a Next.js site that was initially designed for a single language & market to be able to cater to an international audience. We will achieve this by implementing internationalization using next-intl, a library specifically created for Next.js that offers all the relevant pieces for an internationalized web experience.
To practically explore this transition, we will discuss the Next.js internationalization of an e-commerce storefront for a bicycle manufacturer based in the UK that is planning to sell its products to Switzerland.