Next.js 多语言 (1) | 中间件（Middleware）的设置与应用

当我们开发一个支持多语言的 Next.js 网站时，常常需要解决以下问题：

• 用户首次访问时，应该显示哪个语言版本？ 🤔
  比如，用户访问 / 时，是展示 /en 还是 /de？

• SEO 是否能够抓取所有语言版本的页面？ 🔍
  搜索引擎如何识别 /en 和 /de，并在搜索结果中正确展示？

• 中间件是否会干扰静态资源的加载？ 🚧
  比如 /favicon.ico 或 /_next 这样的资源路径是否会被错误地处理？

• 访问未带前缀的页面是否需要跳转？ 🧭
  比如用户访问 /blog/123 时，是否应该自动跳转到 /en/blog/123 或 /zh-CN/blog/123？
  这些问题的核心都与 中间件（Middleware） 的配置密切相关。如果中间件设置不当，不仅会影响用户体验，还会导致搜索引擎抓取异常，最终影响网站的 SEO 表现。

本篇文章将通过案例为你详细解析这些问题，并手把手教你如何配置中间件，让多语言网站更加智能 🌟、高效 🚀 且 SEO 友好 💡。

---

问题 1：用户首次访问时，应该显示哪个语言版本？

问题背景

当用户访问网站的根路径 / 时，他们希望直接进入自己的偏好语言页面（比如 /zh 中文版）。如果默认跳转到 /en（英文版），可能会让不熟悉英文的用户感到困惑，降低用户体验。

那么问题来了：如何在用户首次访问时，自动检测并跳转到他们期望的语言页面呢？

中间件的解决方案：语言检测逻辑

中间件通过以下优先级，动态检测用户的语言：

1. 路径前缀（最高优先级）
   如果用户访问路径中包含语言前缀（如 /en/about 或 /zh/about），中间件会直接使用该语言。
2. Cookie
   中间件会检查是否存在 NEXT_LOCALE Cookie，这个 Cookie 会保存用户之前选择的语言。例如，如果用户上次访问了 /zh，中间件会自动记住并再次跳转到 /zh。
3. 浏览器语言头
   如果路径和 Cookie 中都没有语言信息，中间件会读取浏览器的 Accept-Language 请求头，选择最适合的语言。
   例如，浏览器语言头显示用户的首选语言为 zh（中文），中间件会选择中文页面。
4. 默认语言（最低优先级）
   如果以上条件都无法确定语言，中间件会使用 defaultLocale 中配置的默认语言。比如设置为 en，用户会被跳转到英文页面。

代码示例：语言检测与跳转

// middleware.ts
import createMiddleware from 'next-intl/middleware';

export default createMiddleware({
   
   
  locales: ['en', 'zh'], // 支持的语言：英文和中文
  defaultLocale: 'en',