跳至内容
构建您的应用程序路由国际化

国际化

Next.js 使您能够配置内容的路由和渲染以支持多种语言。使您的网站适应不同的语言环境包括翻译内容（本地化）和国际化路由。

术语

  • 语言环境：一组语言和格式首选项的标识符。这通常包括用户的首选语言，以及可能所在的地理区域。
    • en-US：美式英语
    • nl-NL：荷兰语（荷兰）
    • nl：荷兰语，无特定地区

路由概述

建议使用浏览器中的用户语言首选项来选择要使用的语言环境。更改您的首选语言会将传入的 Accept-Language 标头修改为您的应用程序。

例如，使用以下库，您可以查看传入的 Request 以确定要选择的语言环境，这基于 Headers、您计划支持的语言环境和默认语言环境。

middleware.js
import { match } from '@formatjs/intl-localematcher'
import Negotiator from 'negotiator'
 
let headers = { 'accept-language': 'en-US,en;q=0.5' }
let languages = new Negotiator({ headers }).languages()
let locales = ['en-US', 'nl-NL', 'nl']
let defaultLocale = 'en-US'
 
match(languages, locales, defaultLocale) // -> 'en-US'

可以通过子路径 (/fr/products) 或域名 (my-site.fr/products) 对路由进行国际化。有了这些信息，您现在可以根据 中间件 中的语言环境重定向用户。

middleware.js
import { NextResponse } from "next/server";
 
let locales = ['en-US', 'nl-NL', 'nl']
 
// Get the preferred locale, similar to the above or using a library
function getLocale(request) { ... }
 
export function middleware(request) {
  // Check if there is any supported locale in the pathname
  const { pathname } = request.nextUrl
  const pathnameHasLocale = locales.some(
    (locale) => pathname.startsWith(`/${locale}/`) || pathname === `/${locale}`
  )
 
  if (pathnameHasLocale) return
 
  // Redirect if there is no locale
  const locale = getLocale(request)
  request.nextUrl.pathname = `/${locale}${pathname}`
  // e.g. incoming request is /products
  // The new URL is now /en-US/products
  return NextResponse.redirect(request.nextUrl)
}
 
export const config = {
  matcher: [
    // Skip all internal paths (_next)
    '/((?!_next).*)',
    // Optional: only run on root (/) URL
    // '/'
  ],
}

最后，确保 app/ 内的所有特殊文件都嵌套在 app/[lang] 下。这使 Next.js 路由器能够动态处理路由中的不同语言环境，并将 lang 参数转发到每个布局和页面。例如

app/[lang]/page.js
// You now have access to the current locale
// e.g. /en-US/products -> `lang` is "en-US"
export default async function Page({ params: { lang } }) {
  return ...
}

根布局也可以嵌套在新文件夹中（例如 app/[lang]/layout.js）。

本地化

根据用户首选的语言环境更改显示的内容（或本地化）并不是 Next.js 特有的功能。下面描述的模式在任何 Web 应用程序中都适用。

假设我们希望在应用程序中支持英语和荷兰语内容。我们可能会维护两个不同的“字典”，它们是对象，使我们能够从某个键映射到本地化的字符串。例如

dictionaries/en.json
{
  "products": {
    "cart": "Add to Cart"
  }
}
dictionaries/nl.json
{
  "products": {
    "cart": "Toevoegen aan Winkelwagen"
  }
}

然后，我们可以创建一个 getDictionary 函数来加载请求的语言环境的翻译

app/[lang]/dictionaries.js
import 'server-only'
 
const dictionaries = {
  en: () => import('./dictionaries/en.json').then((module) => module.default),
  nl: () => import('./dictionaries/nl.json').then((module) => module.default),
}
 
export const getDictionary = async (locale) => dictionaries[locale]()

给定当前选择的语言，我们可以在布局或页面内获取字典。

app/[lang]/page.js
import { getDictionary } from './dictionaries'
 
export default async function Page({ params: { lang } }) {
  const dict = await getDictionary(lang) // en
  return <button>{dict.products.cart}</button> // Add to Cart
}

因为 app/ 目录中的所有布局和页面都默认为 服务器组件，所以我们不必担心翻译文件的大小会影响我们的客户端 JavaScript 包大小。此代码**仅在服务器上运行**，并且只有生成的 HTML 会发送到浏览器。

静态生成

要为给定的一组语言环境生成静态路由，我们可以将 generateStaticParams 与任何页面或布局一起使用。这可以是全局的，例如，在根布局中

app/[lang]/layout.js
export async function generateStaticParams() {
  return [{ lang: 'en-US' }, { lang: 'de' }]
}
 
export default function Root({ children, params }) {
  return (
    <html lang={params.lang}>
      <body>{children}</body>
    </html>
  )
}

资源