跳到主要内容

国际化

Next.js 可以配置路由和内容的渲染,以支持多语言。 使您的站点适应不同区域设置包括翻译内容(本地化)和国际化路由。

术语

  • Locale(语言环境):语言和格式首选项的标识符。通常包括用户的首选语言和可能的地理区域。
    • 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
let locales = ['en-US', 'nl-NL', 'nl']

// 获取首选语言环境,类似于上面的方法或使用库
function getLocale(request) { ... }

export function middleware(request) {
// 检查路径名中是否有任何受支持的语言环境
const { pathname } = request.nextUrl
const pathnameHasLocale = locales.some(
(locale) => pathname.startsWith(`/${locale}/`) || pathname === `/${locale}`
)

if (pathnameHasLocale) return

// 如果没有语言环境,则重定向
const locale = getLocale(request)
request.nextUrl.pathname = `/${locale}${pathname}`
// 例如,传入请求为 /products
// 新 URL 现在是 /en-US/products
return Response.redirect(request.nextUrl)
}

export const config = {
matcher: [
// 跳过所有内部路径(_next)
'/((?!_next).*)',
// 可选:仅在根目录(/)URL 上运行
// '/'
],
}

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

app/[lang]/page.js
// 现在可以访问当前的语言环境
// 例如 /en-US/products -> “lang” 是 "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/ 目录中的所有布局和页面都默认为 Server Components, 我们不需要担心翻译文件的大小会影响客户端 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>
)
}

资源