Next.js 13 结合 lingui/react 实现国际化（App目录服务端组件）

完全可以实现，以下是具体实践思路和步骤：

1. 基础依赖安装 #

先安装核心依赖及工具：

npm install @lingui/core @lingui/react @lingui/cli babel-plugin-macros
npm install --save-dev @lingui/babel-plugin-transform-jsx @lingui/loader

2. 配置lingui与Next.js #

2.1 初始化lingui配置 #

在项目根目录创建.linguirc文件，指定支持的语言、源语言及翻译文件路径：

{
  "locales": ["en", "zh-CN"],
  "sourceLocale": "en",
  "catalogs": [
    {
      "path": "src/locales/{locale}",
      "include": ["src"]
    }
  ],
  "format": "json"
}

2.2 配置Next.js国际化 #

在next.config.js中开启Next.js内置的i18n路由支持：

/** @type {import('next').NextConfig} */
const nextConfig = {
  i18n: {
    locales: ["en", "zh-CN"],
    defaultLocale: "en",
  },
};

module.exports = nextConfig;

3. 服务端组件适配核心逻辑 #

Next.js App目录的根布局是服务端组件，我们可以在这里完成i18n实例的初始化，并通过I18nProvider为所有子组件提供国际化上下文。

3.1 根布局中初始化i18n #

以动态路由[locale]为例（更符合Next.js路由规范），在app/[locale]/layout.js中：

import { createI18n } from "@lingui/core";
import { I18nProvider } from "@lingui/react";

// 加载编译后的翻译文件
const loadMessages = (locale) => {
  try {
    return require(`../../locales/${locale}.json`);
  } catch (err) {
    //  fallback到默认语言
    return require(`../../locales/en.json`);
  }
};

export default function LocaleLayout({ children, params }) {
  const { locale } = params;
  const i18n = createI18n({
    locale,
    messages: loadMessages(locale),
  });

  return (
    <html lang={locale}>
      <body>
        <I18nProvider i18n={i18n}>{children}</I18nProvider>
      </body>
    </html>
  );
}

3.2 服务端组件中使用国际化 #

在任意服务端组件中，直接使用Trans组件即可，无需额外钩子：

import { Trans } from "@lingui/react";

export default function HomePage() {
  return (
    <div className="container">
      <h1>
        <Trans id="home.title" defaults="Welcome to Our App" />
      </h1>
      <p>
        <Trans id="home.description" defaults="This is a server-side rendered page with Lingui i18n" />
      </p>
    </div>
  );
}

4. 客户端组件补充（语言切换等交互） #

如果需要客户端交互（比如语言切换按钮），需要标记'use client'指令，然后使用useLingui钩子：

'use client';

import { useLingui } from "@lingui/react";
import { useRouter } from "next/navigation";
import { Trans } from "@lingui/react";

export default function LanguageSwitcher() {
  const { i18n } = useLingui();
  const router = useRouter();

  const switchLocale = (newLocale) => {
    i18n.changeLocale(newLocale);
    // 同步切换Next.js路由
    router.push(`/${newLocale}`);
  };

  return (
    <div className="switcher">
      <button onClick={() => switchLocale('en')}>English</button>
      <button onClick={() => switchLocale('zh-CN')}>中文</button>
      <p>
        <Trans id="current.locale" defaults="Current Language: {locale}" values={{ locale: i18n.locale }} />
      </p>
    </div>
  );
}

5. 翻译流程 #

1. 提取翻译键：运行npx lingui extract，自动扫描代码中的Trans组件，生成待翻译的文件。
2. 填充翻译内容：编辑src/locales/zh-CN.json文件，完成中文翻译。
3. 编译翻译文件：运行npx lingui compile，将翻译文件处理为可直接加载的格式。

关键注意事项 #

• 服务端组件不能使用useLingui钩子，只能通过I18nProvider上下文或直接使用Trans组件。
• 翻译文件建议预编译，避免服务端运行时动态解析，提升性能。
• 如果使用静态生成（SSG），需要为每个locale预生成页面，确保翻译文件在构建时已加载。

内容的提问来源于stack exchange，提问作者Bobkatabo