Next.js[next-i18next] 多服务架构下翻译子目录配置方法问询

我刚好处理过类似的多服务i18n配置需求，给你分享两种结构的具体实现方案：

方案一：按语言划分服务子目录（结构一） #

这种结构下所有翻译文件集中在public/locales下，按语言目录再拆分服务子目录。我们可以通过**命名空间（namespaces）**来区分不同服务的翻译内容，具体配置步骤如下：

1. 配置next-i18next核心文件 #

在项目根目录创建next-i18next.config.js，指定基础locale路径并启用命名空间支持：

// next-i18next.config.js
module.exports = {
  i18n: {
    defaultLocale: 'en',
    locales: ['en', 'de'],
  },
  localePath: typeof window === 'undefined' ? require('path').resolve('./public/locales') : '/locales',
  reloadOnPrerender: process.env.NODE_ENV === 'development',
}

2. 在组件中调用对应服务的翻译 #

使用useTranslation hook时，传入服务对应的命名空间（格式为服务子目录/文件名）：

// src/services/service_one/components/Content.js
import { useTranslation } from 'next-i18next'

export default function ServiceOneContent() {
  const { t } = useTranslation('service_one/content')
  return <div>{t('welcome_message')}</div>
}

3. SSR/SSG场景预加载翻译（可选） #

如果页面需要服务端渲染，在getStaticProps或getServerSideProps中预加载对应服务的命名空间：

// src/services/service_one/pages/index.js
import { serverSideTranslations } from 'next-i18next/serverSideTranslations'

export async function getStaticProps({ locale }) {
  return {
    props: {
      ...await serverSideTranslations(locale, ['service_one/content']),
    },
  }
}

方案二：每个服务独立维护locales目录（结构二） #

这种结构适合完全独立的服务模块，每个服务自行管理翻译文件。我们可以为每个服务创建独立的i18n配置，实现翻译隔离：

1. 为每个服务创建独立的i18n实例 #

比如在service_one目录下创建i18n.js，自定义翻译文件的加载路径：

// src/services/service_one/i18n.js
import { createInstance } from 'i18next'
import { initReactI18next } from 'react-i18next'
import backend from 'i18next-http-backend'
import rootI18nConfig from '../../../next-i18next.config.js'

const createI18nInstance = async (locale) => {
  const i18n = createInstance()
  await i18n
    .use(initReactI18next)
    .use(backend)
    .init({
      ...rootI18nConfig.i18n,
      locale,
      backend: {
        loadPath: '/services/service_one/locales/{{lng}}/{{ns}}.json',
      },
      defaultNS: 'content',
    })
  return i18n
}

export default createI18nInstance

2. 在服务页面中使用独立i18n实例 #

在服务的页面组件中，初始化并通过I18nextProvider注入实例：

// src/services/service_one/pages/index.js
import { useTranslation, I18nextProvider } from 'react-i18next'
import createI18nInstance from '../i18n'

export default function ServiceOnePage({ i18n }) {
  const { t } = useTranslation()
  return (
    <I18nextProvider i18n={i18n}>
      <div>{t('welcome_message')}</div>
    </I18nextProvider>
  )
}

export async function getStaticProps({ locale }) {
  const i18n = await createI18nInstance(locale)
  return {
    props: { i18n },
  }
}

3. 配置Next.js静态资源路由 #

因为翻译文件不在默认的public目录下，需要在next.config.js中添加重写规则，让Next.js能正确加载：

// next.config.js
const nextConfig = {
  async rewrites() {
    return [
      {
        source: '/services/:service/locales/:lng/:ns.json',
        destination: '/src/services/:service/locales/:lng/:ns.json',
      },
    ]
  },
}

module.exports = nextConfig

两种方案的适用场景：

• 方案一更适合服务间有共享翻译内容的场景，管理更集中
• 方案二更适合完全独立的服务模块，隔离性更好

你可以根据自己的架构需求选择对应的方案。

内容的提问来源于stack exchange，提问作者David L. Rajcher