此页面的内容已使用 AI 翻译。
查看英文原文的最新版本使用 Intlayer 和 Next.js 14 的 App Router 开始国际化(i18n)
请参阅 GitHub 上的应用模板。
什么是 Intlayer?
Intlayer 是一个创新的开源国际化(i18n)库,旨在简化现代 Web 应用中的多语言支持。Intlayer 无缝集成了最新的 Next.js 14 框架,包括其强大的 App Router。它经过优化,可与 服务器组件(Server Components) 协同工作,实现高效渲染,并且完全兼容 Turbopack(适用于 Next.js 15 及以上版本)。
使用 Intlayer,你可以:
- 通过声明式字典在组件级别轻松管理翻译。
- 动态本地化元数据、路由和内容。
- 在客户端和服务器端组件中访问翻译内容。
- 确保 TypeScript 支持,通过自动生成的类型提升自动补全和错误检测能力。
- 享受高级功能,如动态语言环境检测和切换。
Intlayer 兼容 Next.js 12、13、14 和 15。如果你使用 Next.js 的页面路由(Page Router),可以参考此指南。对于带或不带 Turbopack 的 Next.js 15,请参考此指南。
在 Next.js 应用中逐步设置 Intlayer 的指南
第一步:安装依赖
使用 npm 安装必要的包:
npm install intlayer next-intlayer
集成 Intlayer 与 Next.js 的包。它为 Next.js 国际化提供上下文提供者和钩子。此外,它还包括用于将 Intlayer 集成到 Webpack 或 Turbopack 的 Next.js 插件,以及用于检测用户首选语言环境、管理 Cookie 和处理 URL 重定向的中间件。
第 2 步:配置您的项目
创建一个配置文件来配置您应用的语言:
import { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = { internationalization: { locales: [ Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH, // 你的其他语言 ], defaultLocale: Locales.ENGLISH, },};export default config;
通过此配置文件,你可以设置本地化的 URL、中间件重定向、cookie 名称、内容声明的位置和扩展名,禁用控制台中的 Intlayer 日志等。有关可用参数的完整列表,请参阅配置文档。
第3步:在你的 Next.js 配置中集成 Intlayer
配置你的 Next.js 设置以使用 Intlayer:
import { withIntlayer } from "next-intlayer/server";/** @type {import('next').NextConfig} */const nextConfig = {};export default withIntlayer(nextConfig);
withIntlayer() Next.js 插件用于将 Intlayer 集成到 Next.js 中。它确保内容声明文件的构建,并在开发模式下监视这些文件。它在 Webpack 或 Turbopack 环境中定义 Intlayer 环境变量。此外,它提供别名以优化性能,并确保与服务器组件的兼容性。
第4步:配置中间件以检测语言环境
设置中间件以检测用户的首选语言环境:
export { intlayerMiddleware as middleware } from "next-intlayer/middleware";export const config = { matcher: "/((?!api|static|assets|robots|sitemap|sw|service-worker|manifest|.*\\..*|_next).*)",};
intlayerMiddleware 用于检测用户的首选语言环境,并根据配置将用户重定向到相应的 URL。此外,它还支持将用户的首选语言环境保存在 cookie 中。
请根据您的应用路由调整 matcher 参数。更多详情请参阅 Next.js 关于配置 matcher 的文档。
第五步:定义动态语言环境路由
删除 RootLayout 中的所有内容,并替换为以下代码:
import type { PropsWithChildren, FC } from "react";import "./globals.css";const RootLayout: FC<PropsWithChildren> = ({ children }) => children;export default RootLayout;
要实现动态路由,通过在你的 [locale] 目录中添加一个新的布局来提供 locale 的路径:
import type { Next14LayoutIntlayer } from "next-intlayer";import { Inter } from "next/font/google";import { getHTMLTextDir } from "intlayer";const inter = Inter({ subsets: ["latin"] });const LocaleLayout: Next14LayoutIntlayer = ({ children, params: { locale },}) => ( <html lang={locale} dir={getHTMLTextDir(locale)}> <body className={inter.className}>{children}</body> </html>);export default LocaleLayout;
[locale] 路径段用于定义语言环境。例如:/en-US/about 将对应 en-US,而 /fr/about 对应 fr。
在此阶段,您可能会遇到错误:Error: Missing <html> and <body> tags in the root layout.。这是预期的,因为 /app/page.tsx 文件不再使用,可以删除。取而代之的是,[locale] 路径段将激活 /app/[locale]/page.tsx 页面。因此,页面将通过浏览器中的路径如 /en、/fr、/es 访问。若要将默认语言环境设置为根页面,请参考第4步中的 middleware 配置。
接下来,在您的应用布局中实现 generateStaticParams 函数。
export { generateStaticParams } from "next-intlayer"; // 插入的代码行const LocaleLayout: Next14LayoutIntlayer = ({ children, params: { locale },}) => { /*... 其余代码*/};export default LocaleLayout;
generateStaticParams 确保您的应用程序为所有语言预构建必要的页面,从而减少运行时计算并提升用户体验。更多详情,请参阅 Next.js 关于 generateStaticParams 的文档。
第6步:声明您的内容
创建并管理您的内容声明以存储翻译:
import { t, type Dictionary } from "intlayer";const pageContent = { key: "page", content: { getStarted: { main: t({ en: "Get started by editing", fr: "Commencez par éditer", es: "Comience por editar", }), pageLink: "src/app/page.tsx", }, },} satisfies Dictionary;export default pageContent;
- IntlayerClientProvider 用于向客户端组件提供 locale。它可以放置在任何父组件中,包括布局组件中。然而,推荐将其放在布局中,因为 Next.js 会在页面间共享布局代码,这样更高效。通过在布局中使用 IntlayerClientProvider,可以避免每个页面都重新初始化它,从而提升性能并在整个应用中保持一致的本地化上下文。
- IntlayerServerProvider 用于向服务器端子组件提供 locale。它不能设置在布局中。
import type { FC } from "react";import { useIntlayer } from "next-intlayer/server";const ServerComponentExample: FC = () => { const content = useIntlayer("server-component-example"); // 创建相关内容声明 return ( <div> <h2>{content.title}</h2> <p>{content.content}</p> </div> );};
如果您想在字符串属性中使用内容,例如 alt、title、href、aria-label 等,必须调用函数的值,如:
jsx<img src={content.image.src.value} alt={content.image.value} />
若要了解有关 useIntlayer 钩子的更多信息,请参阅文档。
(可选)步骤 8:元数据的国际化
如果您想对元数据进行国际化,例如页面标题,可以使用 Next.js 提供的 generateMetadata 函数。在该函数内部,您可以通过 getIntlayer 函数获取内容,从而翻译您的元数据。
import { type Dictionary, t } from "intlayer";import { Metadata } from "next";const metadataContent = { key: "page-metadata", content: { title: t({ en: "Create Next App", fr: "Créer une application Next.js", es: "Crear una aplicación Next.js", }), description: t({ en: "Generated by create next app", fr: "Généré par create next app", es: "Generado por create next app", }), },} satisfies Dictionary<Metadata>;export default metadataContent;
import { getIntlayer, getMultilingualUrls } from "intlayer";import type { Metadata } from "next";import type { LocalParams } from "next-intlayer";export const generateMetadata = ({ params: { locale },}: LocalParams): Metadata => { const metadata = getIntlayer("page-metadata", locale); /** * 生成一个包含每个语言环境对应 URL 的对象。 * * 示例: * ```ts * getMultilingualUrls('/about'); * * // 返回 * // { * // en: '/about', * // fr: '/fr/about', * // es: '/es/about', * // } * ``` */ const multilingualUrls = getMultilingualUrls("/"); return { ...metadata, alternates: { canonical: multilingualUrls[locale as keyof typeof multilingualUrls], languages: { ...multilingualUrls, "x-default": "/" }, }, openGraph: { url: multilingualUrls[locale], }, };};javascript fileName="src/app/[locale]/layout.mjs or src/app/[locale]/page.mjs" codeFormat="esm"import { getIntlayer, getMultilingualUrls } from "intlayer";export const generateMetadata = ({ params: { locale } }) => { const metadata = getIntlayer("page-metadata", locale); /** * 生成一个包含每个语言环境对应 URL 的对象。 * * 示例: * ```ts * getMultilingualUrls('/about'); * * // 返回 * // { * // en: '/about', * // fr: '/fr/about', * // es: '/es/about' * // } * ``` */ const multilingualUrls = getMultilingualUrls("/"); return { ...metadata, alternates: { canonical: multilingualUrls[locale], languages: { ...multilingualUrls, "x-default": "/" }, }, openGraph: { url: multilingualUrls[locale], }, };};// ... 代码的其余部分
注意,从 next-intlayer 导入的 getIntlayer 函数会返回包装在 IntlayerNode 中的内容,允许与可视化编辑器集成。相比之下,从 intlayer 导入的 getIntlayer 函数直接返回内容,不带额外属性。
或者,你也可以使用 getTranslation 函数来声明你的元数据。不过,推荐使用内容声明文件,以便自动化你的元数据翻译并在某个阶段将内容外部化。
import { type IConfigLocales, getTranslation, getMultilingualUrls,} from "intlayer";import type { Metadata } from "next";import type { LocalParams } from "next-intlayer";export const generateMetadata = ({ params: { locale },}: LocalParams): Metadata => { const t = <T>(content: IConfigLocales<T>) => getTranslation(content, locale); return { title: t<string>({ en: "My title", fr: "Mon titre", es: "Mi título", }), description: t({ en: "My description", fr: "Ma description", es: "Mi descripción", }), };};// ... 代码的其余部分
了解有关元数据优化的更多信息,请参阅 Next.js 官方文档。
(可选)步骤9:国际化您的 sitemap.xml 和 robots.txt
要实现 sitemap.xml 和 robots.txt 的国际化,您可以使用 Intlayer 提供的 getMultilingualUrls 函数。该函数允许您为站点地图生成多语言 URL。
import { getMultilingualUrls } from "intlayer";import type { MetadataRoute } from "next";const sitemap = (): MetadataRoute.Sitemap => [ { url: "https://example.com", alternates: { languages: getMultilingualUrls("https://example.com"), }, }, { url: "https://example.com/login", alternates: { languages: getMultilingualUrls("https://example.com/login"), }, }, { url: "https://example.com/register", alternates: { languages: getMultilingualUrls("https://example.com/register"), }, },];export default sitemap;
import type { MetadataRoute } from "next";import { getMultilingualUrls } from "intlayer";// 获取所有多语言 URL 的函数const getAllMultilingualUrls = (urls: string[]) => urls.flatMap((url) => Object.values(getMultilingualUrls(url)) as string[]);// 定义 robots 配置,指定爬虫规则const robots = (): MetadataRoute.Robots => ({ rules: { userAgent: "*", // 适用于所有用户代理 allow: ["/"], // 允许访问根路径 disallow: getAllMultilingualUrls(["/login", "/register"]), // 禁止访问登录和注册页面的所有多语言版本 }, host: "https://example.com", // 网站主机地址 sitemap: `https://example.com/sitemap.xml`, // 网站地图地址});export default robots;
了解有关站点地图优化的更多信息,请参阅官方 Next.js 文档。了解有关 robots.txt 优化的更多信息,请参阅官方 Next.js 文档。
(可选)步骤 10:更改内容语言
要在 Next.js 中更改内容的语言,推荐的方式是使用 Link 组件将用户重定向到相应的本地化页面。Link 组件支持页面预加载,这有助于避免完整的页面重新加载。
"use client";import { Locales, getHTMLTextDir, getLocaleName, getLocalizedUrl,} from "intlayer";import { useLocale } from "next-intlayer";import { type FC } from "react";import Link from "next/link";const LocaleSwitcher: FC = () => { const { locale, pathWithoutLocale, availableLocales } = useLocale(); const { setLocaleCookie } = useLocaleCookie(); return ( <div> <button popoverTarget="localePopover">{getLocaleName(locale)}</button> <div id="localePopover" popover="auto"> {availableLocales.map((localeItem) => ( <Link href={getLocalizedUrl(pathWithoutLocale, localeItem)} hrefLang={localeItem} key={localeItem} aria-current={locale === localeItem ? "page" : undefined} onClick={() => setLocaleCookie(localeItem)} > <span> {/* 语言区域 - 例如 FR */} {localeItem} </span> <span> {/* 该语言区域的语言名称 - 例如 Français */} {getLocaleName(localeItem, locale)} </span> <span dir={getHTMLTextDir(localeItem)} lang={localeItem}> {/* 当前语言环境中的语言名称 - 例如当前语言环境设置为 Locales.SPANISH 时显示 Francés */} {getLocaleName(localeItem)} </span> <span dir="ltr" lang={Locales.ENGLISH}> {/* 英语中的语言名称 - 例如 French */} {getLocaleName(localeItem, Locales.ENGLISH)} </span> </Link> ))} </div> </div> );};
另一种方式是使用 useLocale 钩子提供的 setLocale 函数。该函数不支持页面预取,并且会重新加载页面。
在这种情况下,不使用 router.push 进行重定向,只有您的服务器端代码会更改内容的语言环境。
"use client";import { useRouter } from "next/navigation";import { useLocale } from "next-intlayer";import { getLocalizedUrl } from "intlayer";// ... 其余代码const router = useRouter();const { setLocale } = useLocale({ onLocaleChange: (locale) => { router.push(getLocalizedUrl(pathWithoutLocale, locale)); },});return <button onClick={() => setLocale(Locales.FRENCH)}>切换到法语</button>;
文档参考:
(可选)步骤 11:创建本地化链接组件
为了确保您的应用导航遵循当前的语言环境,您可以创建一个自定义的 Link 组件。该组件会自动在内部 URL 前添加当前语言的前缀。例如,当讲法语的用户点击“关于”页面的链接时,他们会被重定向到 /fr/about,而不是 /about。
这种行为有几个好处:
- SEO 和用户体验:本地化的 URL 有助于搜索引擎正确索引特定语言的页面,并为用户提供其偏好的语言内容。
- 一致性:通过在整个应用中使用本地化链接,您可以确保导航保持在当前语言环境内,防止意外的语言切换。
- 可维护性:将本地化逻辑集中在单个组件中简化了 URL 的管理,使您的代码库更易于维护和扩展,随着应用的增长。
以下是在 TypeScript 中实现的本地化 Link 组件示例:
"use client";import { getLocalizedUrl } from "intlayer";import NextLink, { type LinkProps as NextLinkProps } from "next/link";import { useLocale } from "next-intlayer";import { forwardRef, PropsWithChildren, type ForwardedRef } from "react";/** * 工具函数,用于检查给定的 URL 是否为外部链接。 * 如果 URL 以 http:// 或 https:// 开头,则视为外部链接。 */export const checkIsExternalLink = (href?: string): boolean => /^https?:\/\//.test(href ?? "");/** * 自定义的 Link 组件,根据当前语言环境调整 href 属性。 * 对于内部链接,使用 `getLocalizedUrl` 在 URL 前添加语言前缀(例如 /fr/about)。 * 这确保导航保持在相同的语言环境上下文中。 */export const Link = forwardRef< HTMLAnchorElement, PropsWithChildren<NextLinkProps>>(({ href, children, ...props }, ref: ForwardedRef<HTMLAnchorElement>) => { const { locale } = useLocale(); const isExternalLink = checkIsExternalLink(href.toString()); // 如果链接是内部链接且提供了有效的 href,则获取本地化的 URL。 const hrefI18n: NextLinkProps["href"] = href && !isExternalLink ? getLocalizedUrl(href.toString(), locale) : href; return ( <NextLink href={hrefI18n} ref={ref} {...props}> {children} </NextLink> );});Link.displayName = "Link";
工作原理
检测外部链接:
辅助函数 checkIsExternalLink 用于判断一个 URL 是否为外部链接。外部链接保持不变,因为它们不需要本地化。获取当前语言环境:
useLocale 钩子提供当前的语言环境(例如,法语为 fr)。本地化 URL:
对于内部链接(即非外部链接),getLocalizedUrl 用于自动在 URL 前添加当前语言环境的前缀。这意味着如果用户的语言环境是法语,传入的 /about 作为 href 会被转换为 /fr/about。返回链接:
该组件返回带有本地化 URL 的 <a> 元素,确保导航与语言环境保持一致。
通过在整个应用中集成此 Link 组件,您可以保持一致且具备语言感知的用户体验,同时还能提升 SEO 和可用性。
(可选)步骤 12:优化您的包大小
使用 next-intlayer 时,字典默认会包含在每个页面的打包文件中。为了优化打包体积,Intlayer 提供了一个可选的 SWC 插件,该插件通过宏智能替换 useIntlayer 调用。这确保了字典只会包含在实际使用它们的页面的打包文件中。
要启用此优化,请安装 @intlayer/swc 包。安装后,next-intlayer 会自动检测并使用该插件:
npm install @intlayer/swc --save-dev
注意:此优化仅适用于 Next.js 13 及以上版本。
注意:该包默认不安装,因为 SWC 插件在 Next.js 中仍处于实验阶段,未来可能会有所变化。
配置 TypeScript
Intlayer 使用模块增强来利用 TypeScript 的优势,使您的代码库更健壮。
确保您的 TypeScript 配置包含自动生成的类型。
{ // ... 您现有的 TypeScript 配置 "include": [ // ... 您现有的 TypeScript 配置 ".intlayer/**/*.ts", // 包含自动生成的类型 ],}
Git 配置
建议忽略 Intlayer 生成的文件。这样可以避免将它们提交到您的 Git 仓库中。
为此,您可以在 .gitignore 文件中添加以下指令:
# 忽略 Intlayer 生成的文件.intlayer
VS Code 扩展
为了提升您使用 Intlayer 的开发体验,您可以安装官方的 Intlayer VS Code 扩展。
该扩展提供:
- 翻译键的自动补全。
- 缺失翻译的实时错误检测。
- 翻译内容的内联预览。
- 轻松创建和更新翻译的快速操作。
有关如何使用该扩展的更多详细信息,请参阅Intlayer VS Code 扩展文档。
深入了解
要进一步使用,您可以实现可视化编辑器或使用内容管理系统(CMS)将内容外部化。
文档历史
- 5.5.10 - 2025-06-29:初始化历史
如果您有改善此文档的想法,请随时通过在GitHub上提交拉取请求来贡献。
文档的 GitHub 链接