next-intl
nextjs-i18n-example
Our great sponsors
next-intl | nextjs-i18n-example | |
---|---|---|
5 | 4 | |
1,678 | 10 | |
- | - | |
9.6 | 3.6 | |
8 days ago | about 2 years ago | |
TypeScript | JavaScript | |
MIT License | MIT License |
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.
next-intl
- How next-intl Works
-
Localized tRPC errors
We start with a project that was bootstrapped with create-t3-app. For internationalization we use next-intl and set it up as described in the getting started guide. With this initial project setup we can jump into implementing localized error messages.
-
Translating zod errors with next-intl
When starting a new project with Next.js these days, next-intl and zod are my go to libraries for internationalization and schema validation, respectively. Of course, when using zod for client-facing validations I would like to translate potential error messages. The package zod-i18n can be used to achieve this for i18next, a popular alternative internationalization library. This means that by using this library as starting point one can quickly achieve zod translation with next-intl.
-
Next.js internationalization (i18n) tutorial
As we mentioned earlier, the Next.js works well with existing i18n libraries (react-intl, lingui, next-intl, and similar). In this tutorial, we will use the react-intl.
-
i18n and Next.js
next-intl
nextjs-i18n-example
-
Translate NextJS website
We followed the steps from this article for our NextJS website translation https://localizely.com/blog/nextjs-i18n-tutorial/
-
Next.js internationalization (i18n) tutorial
All code samples used in this article are available on the GitHub repo.
More details and examples you can find in the original post.
What are some alternatives?
next-i18next - The easiest way to translate your NextJs apps.
React Intl - The monorepo home to all of the FormatJS related libraries, most notably react-intl.
next-translate - Next.js plugin + i18n API for Next.js 🌍 - Load page translations and use them in an easy way!
nestjs-localization - Nestjs localization provides a convenient way to retrieve strings in various languages, allowing you to easily support multiple languages within your application.
react-i18next - Internationalization for react done right. Using the i18next i18n ecosystem.
rosetta - A general purpose internationalization library in 292 bytes
jsLingui - 🌍 📖 A readable, automated, and optimized (3 kb) internationalization for JavaScript
next-saas-starter - ⚡️ Free Next.js responsive landing page template for SaaS products made using JAMStack architecture.
next-intl-zod
react-intl-example - React internationalization with react-intl