Back to Details

next-intl-add-language

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

This is a guide to add a new language to a Next.js project using next-intl for internationalization,

For i18n, the application uses next-intl.
All translations are in the directory
```
./messages
```
.
The UI component is
```
src/components/language-toggle.tsx
```
.
Routing and middleware configuration are handled in:
- ```
src/i18n/routing.ts
```
- ```
src/middleware.ts
```

When adding a new language:

Translate all the content of
```
en.json
```
to the new language. The goal is to have all the JSON entries in the new language for a complete translation.
Add the path in
```
routing.ts
```
and
```
middleware.ts
```
.
Add the language to
```
language-toggle.tsx
```
.

这是一份为使用next-intl进行国际化的Next.js项目添加新语言的指南

该应用使用next-intl实现国际化（i18n）功能。
所有翻译文件都位于
```
./messages
```
目录中。
UI组件为
```
src/components/language-toggle.tsx
```
。
路由和中间件配置在以下文件中处理：
- ```
src/i18n/routing.ts
```
- ```
src/middleware.ts
```

添加新语言时的步骤：

将
```
en.json
```
中的所有内容翻译为新语言。目标是让新语言的JSON文件包含所有条目，以实现完整翻译。
在
```
routing.ts
```
和
```
middleware.ts
```
中添加对应的路径配置。
在
```
language-toggle.tsx
```
中添加该语言选项。