Next.js App Router结合next-intl如何防止客户端暴露全部翻译

1. 这是预期行为吗？ #

是的，next-intl默认会将所有翻译文件打包并发送到客户端，无论当前路由是否用到对应命名空间。这是它默认的全量加载策略，目的是确保任意命名空间的翻译都能在客户端随时调用，但确实会导致敏感的管理员专属字符串泄露——即便路由本身是受保护的。

2. 如何防止向客户端暴露全部翻译？ #

核心思路是按需加载翻译命名空间和用服务器组件隔离敏感内容，具体两种实现方式：

方式一：配置next-intl按需加载命名空间 #

修改你的i18n配置文件（比如i18n.ts），通过loadLocaleFrom函数按需加载对应语言和命名空间的翻译文件，替代一次性加载全部内容：

import { createI18nClient } from 'next-intl';

export default createI18nClient({
  locales: ['en', 'ru'],
  defaultLocale: 'ru',
  loadLocaleFrom: async (locale, namespace) => {
    // 按语言+命名空间拆分翻译文件，示例路径：messages/ru/General.json
    return import(`./messages/${locale}/${namespace}.json`).then((module) => module.default);
  }
});

这样首页调用useTranslations("General")时，只会加载General命名空间的翻译，不会拉取Admin相关内容。

方式二：用服务器组件处理敏感翻译 #

管理员路由的敏感翻译，优先在服务器组件中使用getTranslations获取并渲染——服务器组件的代码和数据不会发送到客户端，自然不会泄露：

// app/admin/page.tsx（服务器组件）
import { getTranslations } from 'next-intl/server';

export default async function AdminPage() {
  const t = await getTranslations('Admin');
  return <button>{t('ban')}</button>;
}

如果必须在客户端组件中使用Admin翻译，不要直接在客户端调用useTranslations("Admin")，而是从服务器组件传递翻译后的文本：

// app/admin/ClientComponent.tsx（客户端组件）
'use client';

interface Props {
  banText: string;
}

export default function ClientComponent({ banText }: Props) {
  return <button>{banText}</button>;
}

在服务器组件中传递翻译结果：

// app/admin/page.tsx
import { getTranslations } from 'next-intl/server';
import ClientComponent from './ClientComponent';

export default async function AdminPage() {
  const t = await getTranslations('Admin');
  return <ClientComponent banText={t('ban')} />;
}

3. App Router中按路由隔离翻译的最佳实践 #

• 拆分翻译文件：按「命名空间+语言」拆分，比如messages/ru/General.json、messages/ru/Admin.json，避免单个大文件包含所有翻译内容
• 服务器组件优先处理敏感模块：管理员、支付等涉及敏感文本的模块，尽量在服务器组件中完成翻译和渲染，不将原始翻译字符串暴露给客户端
• 强制启用按需加载：始终在i18n配置中使用loadLocaleFrom实现按需加载，确保客户端只加载当前路由所需的翻译命名空间
• 路由权限与翻译加载绑定：在加载Admin等敏感命名空间的路由中，先完成用户权限校验，未授权用户直接跳转，避免触发敏感翻译的加载流程
• 客户端组件按需导入：如果必须在客户端组件中使用多命名空间翻译，配合dynamic导入和权限判断，确保未授权用户不会加载敏感翻译的代码资源

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