国际化
Next.js 使您能够配置路由和内容渲染来支持多种语言。使您的站点适应包括翻译内容(本地化)和国际化路由的不同的地域。
术语
- Locale: 一组语言和格式首选项的标识符。这通常包括用户首选的语言，还可能包括他们的地理区域。
en-US: 美式英语nl-NL: 荷兰语nl: 荷兰语，没有特定地区
路由概述
建议使用用户在浏览器中的语言首选项来选择要使用的语言区域。更改首选语言将会修改传入到您应用程序的Accept-Language header。
例如，使用下列库，您可以查看基于Headers传入的 请求决定了要选择的语言设置，设置您计划支持和默认的语言区域。
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内部的区域设置来重定向用户。
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 '参数转发到每个布局和页面。例如：
// 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 应用程序。
假设我们想在应用程序中支持英文和荷兰语内容。我们可能会维护两种不同的“字典”，它们是为我们提供从某个键到本地化字符串的映射的对象。例如：
{
"products": {
"cart": "Add to Cart"
}
}
{
"products": {
"cart": "Toevoegen aan Winkelwagen"
}
}
然后，我们创建一个getDictionary function 来加载所请求语言环境的翻译。
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: { lang } }) {
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 function Root({ children, params }) {
return (
<html lang={params.lang}>
<body>{children}</body>
</html>
);
}