i18next在NextJS中非fallback语言无法正常工作求助

问题场景 #

在Next.js应用中集成i18next支持en/fr双语，en为fallback语言。服务端组件page.ts中，明明传入params.lang = 'fr'，但调用t('hero-title')却返回en的翻译内容。

相关配置文件：
i18n/index.ts

import { createInstance } from 'i18next'
import resourcesToBackend from 'i18next-resources-to-backend'
import { initReactI18next } from 'react-i18next/initReactI18next'
import { defaultNS, getOptions } from './settings'

const initI18next = async (lang: string, ns: string) => {
  const i18nInstance = createInstance()
  await i18nInstance
    .use(initReactI18next)
    .use(resourcesToBackend((language: any, namespace: any) => import(`./locales/${language}/${namespace}.json`)))
    .init(getOptions(lang, ns))
  return i18nInstance
}

export async function useTranslation(lang: string, ns: string = defaultNS, options: any = {}) {
  const i18nextInstance = await initI18next(lang, ns)
  return {
    t: i18nextInstance.getFixedT(lang, Array.isArray(ns) ? ns[0] : ns, options.keyPrefix),
    i18n: i18nextInstance
  }
}

i18n/settings.ts

export const fallbackLng = 'en'
export const languages = [fallbackLng, 'fr']
export const cookieName = 'LANG'
export const defaultNS = 'translation'

export function getOptions (lang = fallbackLng, ns = defaultNS) {
  return {
    // debug: true,
    supportedLngs: languages,
    fallbackLng,
    lang,
    fallbackNS: defaultNS,
    defaultNS,
    ns
  }
}

服务端组件代码：

export default async function Home({
  params
}:{
  params: { lang: string },
}) {
  console.log('home lang', params?.lang) // 输出fr
  const { t } = await useTranslation(params?.lang, 'home')
  console.log('home t', t) // 显示lng: 'fr'
  console.log('home t(hero-title)', t('hero-title')) // 返回en翻译
  // ...
}

排查与解决思路 #

1. 验证目标语言资源文件的完整性 #

首先确认i18n/locales/fr/home.json文件存在，且包含hero-title这个key。如果fr语言的资源文件中缺少该key，i18next会自动触发fallback机制，返回en语言的对应翻译。

2. 开启debug模式查看加载日志 #

在getOptions中启用debug: true，查看服务端日志：

export function getOptions (lang = fallbackLng, ns = defaultNS) {
  return {
    debug: true,
    supportedLngs: languages,
    fallbackLng,
    lang,
    fallbackNS: defaultNS,
    defaultNS,
    ns
  }
}

日志会显示资源加载状态：

• 若出现loading namespace home for language fr failed，说明资源文件路径错误或文件不存在
• 若显示falling back to en，说明fr语言的目标key不存在

3. 修正服务端组件的资源加载路径 #

Next.js服务端组件的模块解析路径与客户端不同，相对路径可能无法正确定位到资源文件。可以改用绝对路径加载资源：

// 修改i18n/index.ts中的resourcesToBackend部分
.use(resourcesToBackend((language, namespace) => import(`${process.cwd()}/src/i18n/locales/${language}/${namespace}.json`)))

注意根据你的项目目录结构调整路径（比如如果i18n不在src下，去掉/src）。

4. 捕获资源加载错误 #

在资源加载函数中添加错误捕获，明确是否存在加载失败的情况：

.use(resourcesToBackend(async (language, namespace) => {
  try {
    const resource = await import(`./locales/${language}/${namespace}.json`)
    console.log(`成功加载资源：${language}/${namespace}`, resource)
    return resource
  } catch (error) {
    console.error(`加载资源失败：${language}/${namespace}`, error)
    throw error
  }
}))

5. 检查i18n实例初始化参数 #

确认getOptions传递的lang参数正确，在initI18next中可以添加打印：

const initI18next = async (lang: string, ns: string) => {
  console.log('初始化i18n，语言：', lang)
  const i18nInstance = createInstance()
  // ... 其余代码
}

内容的提问来源于stack exchange，提问作者Achraf El Khamsi