Internationalization for Next.js Without Hassle

For developers who live in a country with multiple national languages like Switzerland, internationalization (i18n) is a must-have and is usually implemented from day 1. For example, in the websites I made for the company I work for, like the iTheorie website, they need to have all four languages—English, German, French, and Italian—since the beginning.

Image

I usually use the solution from next-18next. But a few weeks ago, I found out about Paraglide JS when I attended a React meetup in Zürich. I like the idea of having tree-shakeable messages when using Paraglide JS. This means each page only loads the messages it actually uses. Unfortunately, I couldn't successfully use it with my Next.js project because of several errors. Not to mention, there are unfortunately too many typos in the documentation, which makes me feel unconvinced.

So I decided to make my own solution. Introducing simple-i18n-next. It's a CLI tool that generates TypeScript code from translation files in JSON format and Markdown files for Next.js projects. There's no plugin you need to install and configure. Simply run the CLI to generate the TypeScript code and use it in your project.

Features

• The translations are type-safe. That means there will be build-time errors if you use a translation key that does not exist in a specific language.
• The translation keys are available for all languages. That means you will get an error message if you forget to add a translation for a specific language.
• In React Server Components (RSC), the translations are generated inline, so no JS code is sent to the client.
• In client components, if you use the generated useStrings hook, only the translation strings that you need will be sent to the client. There will be no unused translations sent to the client.
• You can use MDX files and use them as React components.

Please note that this is a work in progress. I have only tested it with Next.js 14 with App Router. Give it a try and let me know if you have any issues.

Update May 22, 2024

Now the tool supports pluralization! Read more about it in this blog post.

By the way, I'm making a book about Pull Requests Best Practices. Check it out!