next-i18next刷新页面后自动切回默认locale问题求助

核心原因 #

你遇到的问题根源在于next-i18next默认启用了浏览器语言自动检测机制，刷新页面时会读取Chrome的默认英语设置，自动将locale切回en，覆盖了你手动切换的cs。

解决步骤 #

1. 调整next-i18next.config.js配置 #

修改配置文件，添加detection选项，明确设置检测优先级，让URL中的locale优先级高于浏览器语言，同时配置缓存保存用户选择的locale：

module.exports = {
  i18n: {
    defaultLocale: 'en',
    locales: ['en', 'cs'],
  },
  detection: {
    order: ['path', 'cookie', 'localStorage', 'htmlTag', 'navigator'], // 将URL路径的locale放在检测首位
    caches: ['cookie', 'localStorage'], // 把用户选择的locale缓存到cookie或本地存储
  },
}

这样配置后，页面刷新时会优先读取URL中的locale值，或者缓存里保存的用户选择，而不是浏览器的默认语言。

2. 确认切换逻辑的正确性 #

如果是用next-i18next提供的useTranslation钩子或i18n.changeLanguage方法切换locale，配置上述缓存后会自动同步保存用户选择；如果是自定义切换逻辑，需要确保切换时同步更新cookie或localStorage。

3. 验证修复效果 #

修改配置后，切换到cs locale再刷新页面，应该能正常保留捷克语环境，不会自动切回英语。

补充说明 #

官方示例能正常运行，是因为示例中已经配置了正确的检测优先级和缓存策略，规避了浏览器语言自动覆盖的问题。你可以对比官方示例的配置文件，确认与当前项目的差异点。

内容的提问来源于stack exchange，提问作者Richard Biroš