根据文档，您不需要自己指定语言：

import i18next from 'i18next';
import LngDetector from 'i18next-browser-languagedetector';

i18next
  .use(LngDetector)
  .init({
    detection: options
  });

而根据这片源中i18next，它的确使用了插件的检测能力：

if (!lng && this.services.languageDetector) lng = this.services.languageDetector.detect();

这是正确的做法吗？

所以，不，它不是。让插件完成它的工作。:)

希望这对将来的某人有所帮助。文档并没有完全给你如何设置检测的全貌，然后我发现了一个封闭的 Github 问题，其中有几个人提出了一个合理的问题，维护人员的回答有点粗鲁，但也碰巧提供了一个应该在文档中的链接- 但在 Github 评论之外绝对没有引用。该示例通过对当前文档声明的内容进行一些小的调整解决了我的问题。

然后，我能够在我的 url 中进行语言检测，https:www.domain.com?lng=es以及在使用允许我更改浏览器语言的浏览器扩展程序时。

这是我的工作i18n.ts文件：

import i18n from 'i18next'
import LanguageDetector from 'i18next-browser-languagedetector'
import { initReactI18next } from 'react-i18next'
import XHR from "i18next-http-backend" // <---- add this

import commonDe from './locales/de/common.json'
import commonEn from './locales/en/common.json'
import commonEs from './locales/es/common.json'
import commonFr from './locales/fr/common.json'

const resources = {
  de: { common: commonDe },
  en: { common: commonEn },
  es: { common: commonEs },
  fr: { common: commonFr }
}

const options = {
  order: ['querystring', 'navigator'],
  lookupQuerystring: 'lng'
}

i18n
  .use(XHR) // <---- add this
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    // lng: 'en' // <--- turn off for detection to work
    detection: options,
    resources,
    ns: ['common'],
    defaultNS: 'common',
    fallbackLng: 'en',
    supportedLngs: ['de', 'en', 'es', 'fr'],
    interpolation: {
      escapeValue: false,
    },
    debug: false,
  })

export default i18n

（额外的帮助 - 如果有人在这部分卡住了）

我在 Next.js 项目中工作，上面的文件是这样加载到project-root/pages/_app.tsx文件中的：

import React from 'react'
import { AppProps } from 'next/app'
import '../i18n/i18n'

import '../public/styles.css'

const TacoFridayApp = ({ Component, pageProps}: AppProps): JSX.Element => {
  
  return <Component {...pageProps} />
}

export default TacoFridayApp

我觉得你很亲近。您i18n最初可以使用后备语言进行设置。然后在为 localstorage 或 localforage 或任何存储加载保存的语言信息后，调用i18nInstance.changeLanguage(lng).

@firstdoit：

关于自动浏览器语言检测的好答案。但是，您不认为这是让用户同时使用自动和手动配置的更好方法。

例如，如果将浏览器设置为英语，那么这对于您根据文档建议的自动方法就可以了。如果用户将页面语言从英语更改为法语，这不会影响浏览器语言，因此将站点仅保留为英语，因为配置已设置为自动检测浏览器语言。

反过来，我会优先考虑当前页面语言：

• 通过参数传递（/george.php?lang=fr 或 /fr_FR/george.php）

这将作为props作为props传递给我的代码，如下所示

• var lang = this.props.lang || this.services.languageDetector.detect() || "恩";

你怎么看？