Next.js + react-i18next刷新后翻译未更新问题求助

核心问题根源 #

你的问题出在SSR模式下服务端与客户端的语言同步不一致：

1. 服务端通过getServerSideProps渲染时，initI18n硬编码了初始语言为en，导致服务端输出的HTML是英文内容；
2. 客户端从localStorage取语言切换为法语时，服务端已生成的父组件DOM没有触发重渲染，只有依赖useTranslation的子组件能感知语言变化并更新；
3. 移除getServerSideProps后页面变为纯客户端渲染，能直接读取localStorage的语言，因此显示正常。

分步解决方案 #

1. 改造i18n初始化函数，支持动态传入语言 #

修改initI18n.ts，让初始化逻辑能接收外部传入的语言，不再硬编码默认值：

export const initI18n = async (lng?: string) =>
  await i18n
    .use<ThirdPartyModule>(initReactI18next)
    .init({
      resources: {
        en: { common: commonEn },
        fr: { common: commonFr },
      },
      ns: ['common'],
      defaultNS: 'common',
      lng: lng || 'en', // 优先使用传入的语言，兜底为英文
      fallbackLng: 'en',
      interpolation: { escapeValue: false },
      debug: true,
    });

2. 在getServerSideProps中获取客户端语言（从Cookie） #

服务端无法读取localStorage，所以需要在切换语言时把语言值存入Cookie，让服务端能获取到。修改页面的getServerSideProps：

export const getServerSideProps: GetServerSideProps = async ({ req }) => {
  // 从请求头Cookie中提取用户选中的语言
  let initialLng = 'en';
  const cookies = req.headers.cookie;
  if (cookies) {
    const langCookie = cookies.split(';').find(c => c.trim().startsWith('selectedLang='));
    if (langCookie) initialLng = langCookie.split('=')[1];
  }

  // 保留你的原有异步请求逻辑
  // const props = await yourAsyncRequest();

  return {
    props: {
      initialLng, // 将服务端获取的语言传递给页面
      // ...props // 你的其他业务props
    },
  };
};

3. 改造_app.tsx，确保服务端与客户端语言同步 #

在根组件中统一处理i18n初始化，对齐服务端与客户端的初始语言：

import { AppProps } from 'next/app';
import { useEffect } from 'react';
import i18n from './path-to-your-i18n-instance';

function MyApp({ Component, pageProps }: AppProps) {
  const { initialLng } = pageProps;

  // 服务端初始化时传入对应语言
  useEffect(() => {
    initI18n(initialLng);
  }, [initialLng]);

  // 客户端初始化时，同步localStorage与i18n的语言
  useEffect(() => {
    const storedLng = localStorage.getItem('selectedLang') || initialLng;
    if (storedLng !== i18n.language) {
      i18n.changeLanguage(storedLng);
    }
  }, [initialLng]);

  return <Component {...pageProps} />;
}

export default MyApp;

4. 完善语言切换逻辑，同步Cookie与localStorage #

修改你的语言切换函数，确保切换时同时更新localStorage和Cookie，让服务端能感知到：

const switchLanguage = (targetLang: 'en' | 'fr') => {
  i18n.changeLanguage(targetLang);
  localStorage.setItem('selectedLang', targetLang);
  // 存入Cookie，有效期30天，确保服务端能读取
  document.cookie = `selectedLang=${targetLang}; max-age=${30*24*60*60}; path=/`;
};

为什么这样能解决问题？ #

• 服务端通过Cookie获取用户选中的语言，渲染对应语言的HTML，避免刷新后回到英文；
• 客户端初始化时对齐服务端与本地存储的语言，确保首次渲染与后续切换的一致性；
• 所有组件通过useTranslation监听语言变化，父组件也会因为初始语言的正确传入而同步更新。

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