NextJS中i18next仅首页生效，其他页面切换语言无翻译求助

核心原因分析 #

这种情况本质是非首页的页面组件未正确集成next-i18next的翻译逻辑，或是页面的服务端/静态生成函数未处理多语言参数。首页能正常工作是因为_app.js或首页本身完成了翻译配置，但其他页面缺失关键步骤。

具体解决步骤 #

1. 确保页面组件正确使用useTranslation钩子 #

检查About等页面组件是否导入并正确调用翻译钩子，注意命名空间要与你的翻译文件对应：

// pages/about.js
import { useTranslation } from 'next-i18next';

export default function About() {
  // 若翻译文件为public/locales/de/about.json，需传入对应命名空间
  const { t } = useTranslation('about');
  return (
    <div>
      <h1>{t('page_title')}</h1>
      <p>{t('page_desc')}</p>
    </div>
  );
}

如果使用默认公共命名空间（比如common.json），则传'common'或省略参数即可。

2. 为非首页页面添加静态/服务端生成函数 #

next-i18next需要在页面的getStaticProps或getServerSideProps中初始化翻译配置，否则客户端无法获取对应语言的翻译资源。

静态生成页面（SSG）配置示例：

// pages/about.js
import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
import { useTranslation } from 'next-i18next';

export default function About() {
  const { t } = useTranslation('about');
  return <div>{t('page_title')}</div>;
}

export async function getStaticProps({ locale }) {
  return {
    props: {
      // 传入当前页面用到的所有命名空间，比如同时用about和common就都列上
      ...(await serverSideTranslations(locale, ['about', 'common'])),
    },
  };
}

服务端渲染页面（SSR）配置示例：

// pages/about.js
import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
import { useTranslation } from 'next-i18next';

export default function About() {
  const { t } = useTranslation('about');
  return <div>{t('page_title')}</div>;
}

export async function getServerSideProps({ locale }) {
  return {
    props: {
      ...(await serverSideTranslations(locale, ['about', 'common'])),
    },
  };
}

3. 校验next-i18next.config.js配置 #

确保配置文件里的语言列表、默认语言、翻译文件路径都正确：

// next-i18next.config.js
module.exports = {
  i18n: {
    defaultLocale: 'en',
    locales: ['en', 'de'], // 包含你使用的所有语言
  },
  localePath: './public/locales', // 指向翻译文件所在目录
};

4. 验证翻译文件路径结构 #

翻译文件必须严格遵循以下目录结构，否则无法被正确读取：

public/
  locales/
    en/
      common.json
      about.json
    de/
      common.json
      about.json

比如de/about.json中要存在对应的键值对，例如{"page_title": "Über Uns"}

5. 检查语言切换逻辑 #

确保语言切换按钮正确更新路由和语言设置：

import { useTranslation } from 'next-i18next';
import { useRouter } from 'next/router';

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

  const changeLanguage = (lng) => {
    i18n.changeLanguage(lng);
    router.push(router.pathname, router.asPath, { locale: lng });
  };

  return (
    <div>
      <button onClick={() => changeLanguage('en')}>English</button>
      <button onClick={() => changeLanguage('de')}>Deutsch</button>
    </div>
  );
}

动态路由额外处理 #

如果是动态路由页面（比如pages/post/[id].js），需要在getStaticPaths中生成所有语言版本的路径：

export async function getStaticPaths({ locales }) {
  const paths = locales.map((locale) => ({
    params: { id: '1' }, // 替换为你的动态参数逻辑
    locale,
  }));
  return { paths, fallback: false };
}

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