外观
国际化
国际化
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>
)
}