国际化
Next.js 允许您配置路由和内容渲染以支持多种语言。使您的网站适应不同区域设置包括翻译内容（本地化）和国际化路由。
术语
- 区域设置 (Locale): 用于标识一组语言和格式偏好的标识符。通常包括用户首选语言及其可能的地理区域。
en-US: 美国使用的英语nl-NL: 荷兰使用的荷兰语nl: 荷兰语，无特定区域
路由概述
建议使用浏览器中的用户语言偏好来选择区域设置。更改首选语言会修改发送到您应用的 Accept-Language 请求头。
例如，使用以下库可以根据请求头 Headers、您计划支持的区域设置和默认区域设置，检查传入的 Request 以确定选择哪个区域设置。
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) 实现国际化。有了这些信息，您现在可以根据 中间件 中的区域设置重定向用户。
import { NextResponse } from "next/server";
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 NextResponse.redirect(request.nextUrl)
}
export const config = {
matcher: [
// 跳过所有内部路径 (_next)
'/((?!_next).*)',
// 可选：仅在根 URL (/) 上运行
// '/'
],
}最后，确保 app/ 下的所有特殊文件都嵌套在 app/[lang] 下。这使得 Next.js 路由器能够动态处理路由中的不同区域设置，并将 lang 参数传递给每个布局和页面。例如：
// 您现在可以访问当前区域设置
// 例如 /en-US/products -> `lang` 是 "en-US"
export default async function Page({
params,
}: {
params: Promise<{ lang: string }>
}) {
const { lang } = await params
return ...
}// 您现在可以访问当前区域设置
// 例如 /en-US/products -> `lang` 是 "en-US"
export default async function Page({ params }) {
const { lang } = await params
return ...
}根布局也可以嵌套在新文件夹中（例如 app/[lang]/layout.js）。
本地化
根据用户首选区域设置更改显示内容（即本地化）并非 Next.js 特有功能。以下描述的模式在任何 Web 应用中同样适用。
假设我们希望应用中同时支持英语和荷兰语内容。我们可以维护两个不同的“字典”，这些字典是从某个键到本地化字符串的映射对象。例如：
{
"products": {
"cart": "Add to Cart"
}
}{
"products": {
"cart": "Toevoegen aan Winkelwagen"
}
}然后我们可以创建一个 getDictionary 函数来加载请求的区域设置的翻译：
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: 'en' | 'nl') =>
dictionaries[locale]()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]()根据当前选择的语言，我们可以在布局或页面中获取字典。
import { getDictionary } from './dictionaries'
export default async function Page({
params,
}: {
params: Promise<{ lang: 'en' | 'nl' }>
}) {
const { lang } = await params
const dict = await getDictionary(lang) // en
return <button>{dict.products.cart}</button> // Add to Cart
}import { getDictionary } from './dictionaries'
export default async function Page({ params }) {
const { lang } = await params
const dict = await getDictionary(lang) // en
return <button>{dict.products.cart}</button> // Add to Cart
}由于 app/ 目录中的所有布局和页面默认都是 服务端组件，我们无需担心翻译文件的大小会影响客户端 JavaScript 包的大小。此代码 仅在服务器上运行，只有生成的 HTML 会发送到浏览器。
静态渲染
要为给定的一组区域设置生成静态路由，我们可以在任何页面或布局中使用 generateStaticParams。这可以是全局的，例如在根布局中：
export async function generateStaticParams() {
return [{ lang: 'en-US' }, { lang: 'de' }]
}
export default async function RootLayout({
children,
params,
}: Readonly<{
children: React.ReactNode
params: Promise<{ lang: 'en-US' | 'de' }>
}>) {
return (
<html lang={(await params).lang}>
<body>{children}</body>
</html>
)
}export async function generateStaticParams() {
return [{ lang: 'en-US' }, { lang: 'de' }]
}
export default async function RootLayout({ children, params }) {
return (
<html lang={(await params).lang}>
<body>{children}</body>
</html>
)
}