Next.js 13集成i18n：刷新后语言Cookie恢复默认值问题

排查方向1：检查i18n配置中的Cookie参数 #

确保i18n.tsx里的Cookie配置正确开启持久化：

• 确认detection.caches包含cookie，这是让i18next把语言设置缓存到Cookie的关键
• 检查cookieOptions.path设为/，避免Cookie仅在当前路径生效
• 合理设置maxAge（比如365 * 24 * 60 * 60对应1年有效期），防止Cookie快速过期
• 根据部署环境调整secure参数：本地开发设false，生产HTTPS环境设true

示例核心配置片段：

i18n.init({
  fallbackLng: 'en',
  detection: {
    order: ['cookie', 'navigator'],
    caches: ['cookie'], // 必须指定缓存到Cookie
    cookieOptions: {
      path: '/',
      maxAge: 31536000,
      sameSite: 'lax',
      secure: process.env.NODE_ENV === 'production'
    }
  },
  // 其他配置...
});

排查方向2：语言切换函数的正确性 #

不要手动操作Cookie，依赖i18n内置方法完成语言切换和Cookie写入：

• 调用i18n.changeLanguage方法，确保等待Promise完成后再刷新页面
• 示例切换函数：

const switchLanguage = (lng: string) => {
  i18n.changeLanguage(lng).then(() => {
    window.location.reload();
  });
};

排查方向3：SSR场景下的Cookie同步 #

如果项目用getServerSideProps做服务端渲染，要确保服务端能正确读取Cookie并同步语言设置：

• 在服务端解析请求Cookie中的i18next值，传递给页面组件初始化i18n
• 示例：

export async function getServerSideProps(context) {
  const userLang = context.req.cookies?.i18next || 'en';
  return { props: { lng: userLang } };
}

页面组件初始化时，用传入的lng触发i18n语言切换，保证前后端语言一致。

排查方向4：浏览器Cookie权限问题 #

• 检查浏览器是否开启隐私模式，该模式下Cookie可能无法持久化
• 确认站点Cookie权限未被禁用，检查浏览器设置中是否允许当前域名存储Cookie
• 排查是否有其他脚本（第三方工具、全局拦截逻辑）修改或删除了i18next Cookie

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