// ...
);
}
```
此时效果如下：
当然在客户端组件中使用肯定是有代价的，如果不在客户端组件中使用，用到的库的代码并不会打包到客户端中：
此时 `layout.js` 的大小为 123kB：
在客户端组件中使用后，用到的库会打包到客户端中：
此时 `layout.js` 的大小为 229kB，整整增加了一倍：
### 第二种方式：next-intl
用 `react-i18next` 的时候是不是感觉很繁琐？但这种方式自由度高，在理解代码的前提下，可以自由开发。当然你也可以使用 `next-intl`，配置和使用都会更便捷一些，让我们看看如何使用 `next-intl`：
#### 1. 基础配置
安装 `next-intl`：
```bash
npm install next-intl
```
在 `app`目录下添加一个名为 `[locale]` 的文件夹，将 `favicon.ico`以外的文件，移动到该文件夹下：
在根目录下添加一个 `config.js`文件用于自定义一些全局配置：
```javascript
export const locales = ['zh', 'en']
export const defaultLocale = 'zh'
```
为了方便导入，我们修改根目录的 `jsconfig.json`设置路径别名：
```json
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/actions": ["app/[locale]/actions.js"],
"@/*": ["/*"]
}
}
}
```
修改 `next.config.js`，代码如下：
```javascript
const withNextIntl = require('next-intl/plugin')();
const nextConfig = {}
module.exports = withNextIntl(nextConfig)
```
根目录下新建 `i18n.js`（该文件为约定文件名，默认需要叫这个，当然也可以修改），代码如下：
```javascript
import {notFound} from "next/navigation";
import {getRequestConfig} from 'next-intl/server';
import { locales } from '@/config.js'
export default getRequestConfig(async ({locale}) => {
if (!locales.includes(locale)) notFound();
return {
messages: (await import(`./messages/${locale}.json`)).default
};
});
```
根目录下新建 `middleware.js`，代码如下：
```javascript
import createMiddleware from 'next-intl/middleware';
import { locales, defaultLocale } from '@/config.js';
export default createMiddleware({
locales,
defaultLocale,
// 默认语言不重定向
localePrefix: 'as-needed'
});
export const config = {
matcher: ['/((?!api|_next|_vercel|.*\\..*).*)']
};
```
#### 2. 准备翻译文件
在根目录下新建名为 `message`的文件夹，新建 `en.json`，代码如下：
```javascript
{
"Basic": {
"new": "new",
"initText": "Click a note on the left to view something! 🥺",
"search": "search",
"edit": "edit"
}
}
```
新建 `zh.json`，代码如下：
```javascript
{
"Basic": {
"new": "+",
"initText": "点击左侧笔记查阅内容 🥺",
"search": "搜索",
"edit": "编辑"
}
}
```
#### 3. 服务端组件使用
使用的时候，要注意区分是在 async 组件中还是非 async 组件中。
**3.1. 非 async 组件**
当在非 async 组件中，以 `app/[lng]/page.js`为例：
```javascript
import {useTranslations} from 'next-intl';
export default function Page() {
const t = useTranslations('Basic');
return (
{t('initText')}
)
}
```
组件中也可以直接使用，以 `components/Sidebar.js`为例：
```javascript
// ...
import {useTranslations} from 'next-intl';
export default async function Sidebar() {
const t = useTranslations('Basic');
return (
<>
// ...
// ...
)
}
```
**3.2. async 组件**
如果是在 async 组件中使用，依然以 `app/[lng]/page.js`为例：
```javascript
import {getTranslations} from 'next-intl/server';
export default async function Page() {
const t = await getTranslations('Basic');
return (
{t('initText')}
)
}
```
在 async 组件中使用 `useTranslations` 会导致报错：
#### 4. 客户端组件使用
**4.1. 通过 props 传给客户端组件**
如果要在客户端组件中使用，优先选择将翻译的内容通过 props 传给客户端组件，我们以 `/components/SidebarSearchField.js`为例：
修改 `/compoents/Sidebar.js`：
```javascript
// ...
import {useTranslations} from 'next-intl';
export default function Sidebar() {
const t = useTranslations('Basic');
// const messages = useMessages();
return (
<>
)
}
```
修改 `/compoents/SidebarSearchField.js`：
```javascript
'use client';
// ...
export default function SidebarSearchField({search}) {
// ...
return (
// ...
handleSearch(e.target.value)}
/>
);
}
```
效果如下：
**4.2. 使用 NextIntlClientProvider**
如果不能这样做，比如用到一些动态的值，那就需要用 `NextIntlClientProvider` 将组件包裹起来，还是以 `/components/SidebarSearchField.js`为例：
修改 `/compoents/Sidebar.js`：
```jsx
// ...
import { useTranslations, NextIntlClientProvider, useMessages} from 'next-intl';
export default function Sidebar() {
const t = useTranslations('Basic');
const messages = useMessages();
return (
<>
)
}
```
修改 `/compoents/SidebarSearchField.js`：
```jsx
'use client';
// ...
import {useTranslations} from 'next-intl';
export default function SidebarSearchField() {
const t = useTranslations('Basic');
//...
return (
// ...
handleSearch(e.target.value)}
/>
// ...
);
}
```
当然这样做也是有代价的，如果只是通过 props 传给客户端组件：
但改为使用 NextIntlClientProvider 后：
由于打包到客户端的包更多了，`layout.js` 的大小从之前的 `131kB` 变成了 `239kB`。
关于 next-intl，更详细具体的用法参考其[官方文档](https://next-intl-docs.vercel.app/docs/getting-started/app-router)。
### 总结
那么今天的内容就结束了，本篇的代码已经上传到[代码仓库](https://github.com/mqyqingfeng/next-react-notes-demo/tree/main)的 Day 6 分支：
* react-i18next 实现在 [day6](https://github.com/mqyqingfeng/next-react-notes-demo/tree/day6) 分支
* next-intl 实现在 [day6-1](https://github.com/mqyqingfeng/next-react-notes-demo/tree/day6-1) 分支
### 参考链接
1. [i18next documentation](https://www.i18next.com/)
2. [react-i18next documentation](https://react.i18next.com/)
3. [i18n with Next.js 13/14 and app directory / App Router (an i18next guide)](https://locize.com/blog/next-app-dir-i18n/)
4.
React Notes