i18n 路由

概述

本指南将引导您通过使用 gt-next 的内置中间件为您的 Next.js 应用程序添加 i18n 路由和本地化路径。

什么是 i18n 路由？

为每种语言创建新路由的好处是使您的网站更易于用户使用并改善 SEO。 i18n 路由允许您将特定的 URL 与不同的语言环境关联。 例如，您可以为英语使用 /en/airplanes，为中文使用 /zh/airplanes，等等。

您可以通过本地化路径将其更进一步。 这些是 i18n 路由的扩展，允许您为某个语言环境指定别名路径。 例如，您可以为英语指定 /en/airplanes，为中文指定 /zh/飞机，等等。

设置 i18n 路由

我们将通过两个简单的步骤来为您的 Next.js 应用程序添加 i18n 路由：

第一步：添加动态路由

在您的应用程序文件夹中插入一个名为 [locale] 的目录（例如，app/[locale]）。 将您的所有页面和布局包含在此目录下。

确保 app/ 中的所有特殊文件都嵌套在 app/[locale] 下。

第二步：添加中间件文件

在 Next.js 中，在根目录下创建一个名为 middleware.js（如果您使用 TypeScript，则为 .ts）的文件。 如果您使用 src/ 文件夹，请将其放在 src/middleware.js（或 .ts）中。 将 createNextMiddleware() 函数添加到文件中。

import { createNextMiddleware } from 'gt-next/middleware'
 
export default createNextMiddleware();
 
export const config = {
  matcher: [
    /*
      * 匹配所有请求路径，除了以下开头的路径：
      * - api (API 路由)
      * - _next (内部文件)
      * - 静态文件
      */
    "/((?!api|static|.*\\..*|_next).*)",
  ],
}

设置本地化路径

您可以通过中间件文件中的 pathConfig 选项指定本地化路径。

export default createNextMiddleware({
  pathConfig: {
    // 您可以指定一个共享路径（可选）
    // 这将创建 "/en/about" 和 "/zh/about"
    "/about": "/about",
 
    // 指定本地化路径
    // 这将创建 "/en/airplanes" 和 "/zh/飞机"
    "/airplanes": {
      "zh": "/飞机",
    }
 
    // 添加动态路径参数
    // 这将创建 "/en/airports/123" 和 "/zh/飞机机场/123"
    "/airports/[id]": {
      "zh": "/飞机机场/[id]",
    }
  },
});

在此示例中，我们为 /en/about 创建了一个默认路径，并为 /en/airplanes 和 /en/airports/[id] 创建了本地化路径。 在中文中，这些路径将分别别名为 /zh/about、/zh/飞机 和 /zh/飞机机场/[id]。

路由行为

默认语言前缀

默认情况下，您的 defaultLocale（即您应用的默认语言）不会在网址中加上语言代码前缀。 例如，如果您的默认语言是 en，并且您有一个页面在 /about，它将在英语中通过 /about 访问。 然而，在中文中，它将在中文中通过 /zh/about 访问。

如果您不希望这种行为，可以在中间件配置中将 prefixDefaultLocale 设置为 false 来禁用它。

语言检测和重定向

中间件将根据 (1) 网址路径语言，(2) 引荐来源语言，(3) 浏览器的接受语言，最后 (4) defaultLocale 来检测用户的语言。 然后用户将被相应地重定向。

如果页面的本地化版本随时存在，他们将被重定向到本地化的 URL。 例如，/zh/airplanes 将始终重定向到 /zh/飞机。

边缘情况：没有语言前缀的本地化路径

如果您导航到没有语言前缀的本地化路径（例如，/飞机），中间件将根据它认为您的当前语言为该路径加上前缀。

例如，访问 /飞机 仅在中间件明确识别您的语言为 zh 时才会重定向到 /zh/飞机。 这很好，但仅在中间件认为您的语言是 zh 时有效。

否则，您的路径将加上您当前语言的前缀。 例如，访问 /飞机 将重定向到 /en/飞机，如果中间件认为您的语言是 en。 这将导致 404。

我们建议始终使用项目中 defaultLocale 的路径。 这将始终自动重定向到正确的语言本地化路径。

<Link href="/about">About</Link>
<Link href="/planes">Planes</Link>
<Link href="/airports/123">Airport 123</Link>

如果您想明确链接到不同的语言，那么您可以通过使用本地化路径来实现。

<Link href="/zh/about">About in Chinese</Link>
<Link href="/zh/飞机">Planes in Chinese</Link>
<Link href="/zh/飞机机场/123">Airport 123 in Chinese</Link>

注意事项

• i18n 路由会更改应用程序的 URL 结构。每种语言都有自己的 URL。
• 中间件文件是处理路由逻辑所必需的。
• 您可以在中间件配置和 next 配置文件中指定支持的语言环境。

下一步

• 查看 createNextMiddleware() 的 API 文档。
• 阅读更多关于语言环境管理的信息。
• 学习如何翻译您的应用程序。