i18next 怎么检测和切换语言？浏览器/SSR 方案详解

i18next 通过 i18next-browser-languagedetector 插件实现语言检测，默认按 querystring → cookie → localStorage → navigator → htmlTag 的顺序依次探测，命中即停止。检测结果默认写入 localStorage 和 cookie 做持久化，可通过 cacheUserLanguage 自定义缓存方式。手动切换语言调用 i18n.changeLanguage('zh')，该方法内部会重新触发初始化流程并发出 languageChanged 事件。在 React 中，react-i18next 订阅了该事件，语言切换后自动触发组件重渲染。服务端场景下不使用浏览器检测插件，而是从请求头 Accept-Language 或 URL 路径中提取语言标识。

追问

检测顺序可以自定义吗？

可以。配置 order 数组即可调整检测顺序或增删检测源：

js
i18n.use(LanguageDetector).init({
  detection: {
    order: ['localStorage', 'navigator']
  }
});

如何让用户首次访问时默认使用某种语言？

设置 lookupQuerystring、lookupCookie 等对应的 key，并在缓存中预写该值。更直接的方式是配置 supportedLngs 和 fallbackLng，当检测到的语言不在支持列表内时回退到 fallbackLng。

changeLanguage 是异步的吗？

是的，它返回 Promise。切换后需等待资源加载完成再渲染内容，否则会显示旧语言或 fallback 文本：

js
await i18n.changeLanguage('ja');
// 此时新语言资源已就绪

服务端如何实现语言检测？

SSR 中不引入浏览器检测插件，一般从 req.headers['accept-language'] 解析，或根据 URL 前缀（如 /en/about）提取。解析结果通过 i18n.changeLanguage() 注入当前请求实例。每个请求应使用独立的 i18n 实例，避免语言状态跨请求污染。