作者:
    Aymeric PINEAU
    Creation:2025-10-05Last update:2026-05-31

    使用 Intlayer 翻译你的 Next.js 15 next-intl 网站 | 国际化 (i18n)

    本指南将引导你了解 next-intl 在 Next.js 15（App Router）应用中的最佳实践，并展示如何在其基础上叠加 Intlayer，实现强大的翻译管理和自动化。

    请参阅next-i18next vs next-intl vs Intlayer中的比较。

    • 针对初级开发者：按照分步章节操作，构建一个可用的多语言应用。
    • 针对中级开发者：关注负载优化和服务器/客户端的分离。
    • 针对高级开发者：关注静态生成、中间件、SEO 集成和自动化钩子。

    我们将涵盖的内容：

    • 设置和文件结构
    • 优化消息加载方式
    • 客户端和服务器组件的使用
    • 元数据、站点地图、robots 以支持 SEO
    • 用于本地化路由的中间件
    • 在此基础上添加 Intlayer（CLI 和自动化）

    使用 next-intl 设置你的应用

    安装 next-intl 依赖：

    bash
    npm install next-intl
    bash
    .
├── locales
│   ├── en
│   │  ├── common.json
│   │  └── about.json
│   ├── fr
│   │  ├── common.json
│   │  └── about.json
│   └── es
│      ├── common.json
│      └── about.json
└── src
    ├── i18n.ts
    ├── middleware.ts
    ├── app
    │   └── [locale]
    │       ├── layout.tsx
    │       └── about
    │           └── page.tsx
    └── components
        ├── ClientComponentExample.tsx
        └── ServerComponent.tsx

    设置和加载内容

    仅加载路由所需的命名空间，并尽早验证 locales。尽可能保持服务器组件同步，只将所需的消息推送到客户端。

    src/i18n.ts
    import { getRequestConfig } from "next-intl/server";
import { notFound } from "next/navigation";

export const locales = ["en", "fr", "es"] as const;
export const defaultLocale = "en" as const;

async function loadMessages(locale: string) {
  // 仅加载布局/页面所需的命名空间
  const [common, about] = await Promise.all([
    import(`../locales/${locale}/common.json`).then((m) => m.default),
    import(`../locales/${locale}/about.json`).then((m) => m.default),
  ]);

  return { common, about } as const;
}

export default getRequestConfig(async ({ locale }) => {
  if (!locales.includes(locale)) notFound();

  return {
    messages: await loadMessages(locale),
  };
});
    src/app/[locale]/layout.tsx
    import type { ReactNode } from "react";
import { locales } from "@/i18n";
import {
  getLocaleDirection,
  unstable_setRequestLocale,
} from "next-intl/server";

export const dynamic = "force-static";

export function generateStaticParams() {
  return locales.map((locale) => ({ locale }));
}

export default async function LocaleLayout({
  children,
  params,
}: {
  children: ReactNode;
  params: { locale: string };
}) {
  const { locale } = params;

  // 为此服务器渲染（RSC）设置活动请求语言环境
  unstable_setRequestLocale(locale);

  const dir = getLocaleDirection(locale);

  return (
    <html lang={locale} dir={dir}>
      <body>{children}</body>
    </html>
  );
}
    src/app/[locale]/about/page.tsx
    import { getTranslations, getMessages, getFormatter } from "next-intl/server";
import { NextIntlClientProvider } from "next-intl";
import pick from "lodash/pick";
import ServerComponent from "@/components/ServerComponent";
import ClientComponentExample from "@/components/ClientComponentExample";

export const dynamic = "force-static";

export default async function AboutPage({
  params,
}: {
  params: { locale: string };
}) {
  const { locale } = params;

  // 消息在服务器端加载。仅推送客户端所需的内容。
  const messages = await getMessages();
  const clientMessages = pick(messages, ["common", "about"]);

  // 严格的服务器端翻译/格式化
  const tAbout = await getTranslations("about");
  const tCounter = await getTranslations("about.counter");
  const format = await getFormatter();

  const initialFormattedCount = format.number(0);

  return (
    <NextIntlClientProvider locale={locale} messages={clientMessages}>
      <main>
        <h1>{tAbout("title")}</h1>
        <ClientComponentExample />
        <ServerComponent
          formattedCount={initialFormattedCount}
          label={tCounter("label")}
          increment={tCounter("increment")}
        />
      </main>
    </NextIntlClientProvider>
  );
}

    在客户端组件中的使用示例

    让我们来看一个渲染计数器的客户端组件示例。

    翻译内容（复用结构；根据需要加载到 next-intl 消息中）

    locales/en/about.json
    {
  "counter": {
    "label": "计数器",
    "increment": "递增"
  }
}
    locales/fr/about.json
    {
  "counter": {
    "label": "计数器",
    "increment": "增加"
  }
}

    客户端组件

    src/components/ClientComponentExample.tsx
    "use client";

import React, { useState } from "react";
import { useTranslations, useFormatter } from "next-intl";

const ClientComponentExample = () => {
  // 直接作用于嵌套对象
  const t = useTranslations("about.counter");
  const format = useFormatter();
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>{format.number(count)}</p>
      <button
        aria-label={t("label")}
        onClick={() => setCount((count) => count + 1)}
      >
        {t("increment")}
      </button>
    </div>
  );
};

    不要忘记在页面客户端消息中添加 "about" 消息 （只包含您的客户端实际需要的命名空间）。

    在服务器组件中的使用

    此 UI 组件是一个服务器组件，可以在客户端组件下渲染（页面 → 客户端 → 服务器）。通过传递预先计算好的字符串保持同步。

    src/components/ServerComponent.tsx
    type ServerComponentProps = {
  formattedCount: string; // 格式化后的计数
  label: string; // 按钮的无障碍标签
  increment: string; // 按钮显示的文本
};

const ServerComponent = ({
  formattedCount,
  label,
  increment,
}: ServerComponentProps) => {
  return (
    <div>
      <p>{formattedCount}</p>
      <button aria-label={label}>{increment}</button>
    </div>
  );
};

    注意：

    • 在服务器端计算 formattedCount（例如，const initialFormattedCount = format.number(0)）。
    • 避免将函数或不可序列化的对象传递给服务器组件。
    src/app/[locale]/about/layout.tsx
    import type { Metadata } from "next";
import { locales, defaultLocale } from "@/i18n";
import { getTranslations } from "next-intl/server";

function localizedPath(locale: string, path: string) {
  return locale === defaultLocale ? path : "/" + locale + path;
}

export async function generateMetadata({
  params,
}: {
  params: { locale: string };
}): Promise<Metadata> {
  const { locale } = params;
  const t = await getTranslations({ locale, namespace: "about" });

  const url = "/about";
  const languages = Object.fromEntries(
    locales.map((locale) => [locale, localizedPath(locale, url)])
  );

  return {
    title: t("title"),
    description: t("description"),
    alternates: {
      canonical: localizedPath(locale, url),
      languages: { ...languages, "x-default": url },
    },
  };
}

// ... 页面代码的其余部分
    src/app/sitemap.ts
    import type { MetadataRoute } from "next";
import { locales, defaultLocale } from "@/i18n";

const origin = "https://example.com";

const formatterLocalizedPath = (locale: string, path: string) =>
  locale === defaultLocale ? origin + path : origin + "/" + locale + path;

export default function sitemap(): MetadataRoute.Sitemap {
  const aboutLanguages = Object.fromEntries(
    locales.map((l) => [l, formatterLocalizedPath(l, "/about")])
  );

  return [
    {
      url: formatterLocalizedPath(defaultLocale, "/about"),
      lastModified: new Date(),
      changeFrequency: "monthly",
      priority: 0.7,
      alternates: { languages: aboutLanguages },
    },
  ];
}
    src/app/robots.ts
    import type { MetadataRoute } from "next";
import { locales, defaultLocale } from "@/i18n";

const origin = "https://example.com";
// 返回包含所有语言版本路径的数组
const withAllLocales = (path: string) => [
  path,
  ...locales
    .filter((locale) => locale !== defaultLocale)
    .map((locale) => "/" + locale + path),
];

export default function robots(): MetadataRoute.Robots {
  // 禁止访问的路径列表，包含所有语言版本的 /dashboard 和 /admin
  const disallow = [
    ...withAllLocales("/dashboard"),
    ...withAllLocales("/admin"),
  ];

  return {
    rules: { userAgent: "*", allow: ["/"], disallow },
    host: origin,
    sitemap: origin + "/sitemap.xml",
  };
}

    用于语言路由的中间件

    添加一个中间件来处理语言环境检测和路由：

    src/middleware.ts
    import createMiddleware from "next-intl/middleware";
import { locales, defaultLocale } from "@/i18n";

export default createMiddleware({
  locales: [...locales],
  defaultLocale,
  localeDetection: true,
});

export const config = {
  // 跳过 API、Next 内部文件和静态资源
  matcher: ["/((?!api|_next|.*\\..*).*)"],
};

    最佳实践

    • 设置 html 的 lang 和 dir：在 src/app/[locale]/layout.tsx 中，通过 getLocaleDirection(locale) 计算 dir，并设置 <html lang={locale} dir={dir}>。
    • 按命名空间拆分消息：按语言环境和命名空间组织 JSON（例如，common.json、about.json）。
    • 最小化客户端负载：在页面中，只向 NextIntlClientProvider 发送所需的命名空间（例如，pick(messages, ['common', 'about'])）。
    • 优先使用静态页面：导出 export const dynamic = 'force-static' 并为所有 locales 生成静态参数。
    • 同步服务器组件：传递预先计算好的字符串（翻译标签、格式化数字），而不是异步调用或不可序列化的函数。

    在 next-intl 之上实现 Intlayer

    安装 intlayer 依赖：

    bash
    npm install intlayer @intlayer/sync-json-plugin --save-dev

    创建 intlayer 配置文件：

    intlayer.config.ts
    import { type IntlayerConfig, Locales } from "intlayer";
import { syncJSON } from "@intlayer/sync-json-plugin";

const config: IntlayerConfig = {
  internationalization: {
    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
    defaultLocale: Locales.ENGLISH,
  },
  ai: {
    apiKey: process.env.OPENAI_API_KEY,
  },
  plugins: [
    // 保持每个命名空间的文件夹结构与 Intlayer 同步
    syncJSON({
      format: "icu",
      source: ({ key, locale }) => `./locales/${locale}/${key}.json`,
    }),
  ],
};

export default config;

    添加 package.json 脚本：

    package.json
    {
  "scripts": {
    "i18n:fill": "intlayer fill",
    "i18n:test": "intlayer test"
  }
}

    备注：

    • intlayer fill：使用您的 AI 提供者根据配置的语言环境填充缺失的翻译。
    • intlayer test：检查缺失或无效的翻译（在持续集成中使用）。

    您可以配置参数和提供者；详情请参见 Intlayer CLI。

    为什么Intlayer？