5. I18N 项目设置

import { defineRouting } from 'next-intl/routing'

export const routing = defineRouting({
  locales: ['en', 'zh'],
  defaultLocale: 'en',
  localePrefix: 'as-needed'
})
```

这样修改后，英文页面的 URL 将是 `/about`，中文页面的 URL 将是 `/zh/about`。

### 路由检测机制

Next-intl自己有一套检测机制，可以根据多种因素自动确定用户的首选语言。默认情况下，会按照以下优先级顺序检测语言：

1. URL 路径中的语言前缀（例如 `/zh/about`）
2. Cookie 中保存的之前检测到的语言偏好
3. 浏览器的 `accept-language` 请求头
4. 如果以上都无法匹配，则使用 `defaultLocale` 设置的默认语言

用户第一次访问网站时会根据浏览器语言自动跳转到相应语言版本，后续访问则会记住他们的语言偏好。

#### 工作流示例

1. 用户请求 `/` 路径，系统根据 `accept-language` 头部匹配到 `en` 语言
2. 用户被重定向到 `/` (因为我们设置了 `localePrefix: 'as-needed'` 且 `en` 是默认语言)
3. 应用渲染 `<Link locale="zh" href="/">切换到中文</Link>` 允许用户切换到中文
4. 用户点击链接后，发起对 `/zh` 的请求
5. 中间件会添加一个 cookie 来记住用户对中文的偏好
6. 用户稍后再次请求 `/`，中间件会根据 cookie 重定向到 `/zh`

#### 语言匹配算法

Next-intl 使用 `@formatjs/intl-localematcher` 的"最佳匹配"算法来确定最合适的语言。

简单来说，这个算法能更智能地理解用户想要的语言，即使没有完全匹配的选项。

例如，如果您的应用支持 `en` 和 `zh` 这两种语言，而用户浏览器发送的 `accept-language` 头是 `en-GB`：

- "查找"算法会逐步移除用户 `accept-language` 头中的子标签，直到找到匹配项。在这种情况下，它找不到匹配项，因此会使用默认语言。
- "最佳匹配"算法会比较用户的 `accept-language` 头与可用语言之间的距离，同时考虑区域信息。因此，"最佳匹配"算法能够将 `en` 匹配为最佳匹配语言。

想象一下这个场景：你的网站支持英语(`en`)和简体中文(`zh`)，英国的用户访问你的网站，他的浏览器设置为英式英语(`en-GB`)，传统的"查找"算法会说："我找不到英式英语，所以我将使用默认语言"。而"最佳匹配"算法会说："虽然没有英式英语，但英语和英式英语很接近，所以我会选择英语而不是默认的中文"。

## 常用语言代码最佳实践

当我们理解了语言匹配后，我写了一个常用语言最佳实践配置示例：

```typescript
import { defineRouting } from 'next-intl/routing'

export const locales = [
  {
    code: 'en',
    name: 'English',
    dir: 'ltr'
  },
  {
    code: 'zh',
    name: '中文',
    dir: 'ltr'
  },
  {
    code: 'ja',
    name: '日本語',
    dir: 'ltr'
  },
  {
    code: 'ko',
    name: '한국어',
    dir: 'ltr'
  },
  {
    code: 'es',
    name: 'Español',
    dir: 'ltr'
  },