next-i18next -是否可以动态更改默认语言？

Question

我使用next-i18next来处理我的next.js应用程序的国际化。

是否可以动态更改默认语言？例如，基于顶级域？

const defaultLanguage = topLevelDomain === "de" : "de" ? "it";

编辑:我也在使用localeSubpaths，所以这就是我尝试研究这个话题的原因。

Answer 1

对于使用Nextjs v10.0.0作为编写的here的人，我们必须使用最新的configurations。

next-i18next.config.js

module.exports = {
  i18n: {
    defaultLocale: 'it',
    locales: ['it', 'de'],
  },
}

next.config.js

const { i18n } = require('./next-i18next.config')

module.exports = {
  i18n,
}

要更改语言，我们必须使用next/link和next/router

import Link from 'next/link'
import { useRouter } from 'next/router'
import { Menu } from 'antd'
import { BorderOutlined, CheckSquareOutlined } from '@ant-design/icons'

.
.
.

export default function YourComponent() {
  .
  .
  const router = useRouter()

  const selectedLang = lang => {
    return router.locale === lang ? <CheckSquareOutlined /> : <BorderOutlined />
  }

  return (
    .
    .
    .
    <Menu onClick={handleLangMenuClick}>
      <Menu.Item key="it" icon={selectedLang('it')}>
        <Link href={router.pathname} locale="it" >
          <a>Italian</a>
        </Link>
      </Menu.Item>
      <Menu.Item key="en" icon={selectedLang('de')}>
        <Link href={router.pathname} locale="de" >
          <a>German</a>
        </Link>
      </Menu.Item>
    </Menu>
    .
    .
  )

.
.
}

但你必须牢记：

1. 在first render中，默认语言将始终引用浏览器发送的Accept- Language标头。换句话说，默认语言将基于目标用户的浏览器语言设置。

假设浏览器发送Accept-Language报头如下( de和it都存在)：

Accept-Language: de、de;q=0.9、it;q=0.8、en;q=0.7、*;q=0.5 #注意：q的值可能不同，越大优先级越高

然后，忽略next-i18next.config.js.中的配置defaultLocale，默认语言将为German

1. 如果de和it都未在Accept-Language中列出，例如：

接受语言: fr-CH、fr;q=0.9、en;q=0.8、cn;q=0.7、*;q=0.5

然后，根据我们所做的配置，默认语言将是Italian。

1. 出于开发目的，我们可以在chrome://settings/?search=language更改浏览器语言设置(我使用谷歌chrome)，并根据您的喜好对语言进行排序。

1. 我们可以根据用户的选择，以编程方式将添加到目标用户的浏览器中，从而为下一个呈现cookie设置缺省语言。示例：

从“react-cookies”导入cookie。。。导出默认函数YourComponent() {。。setDefaultLang = (lang) => { cookie.save('NEXT_LOCALE'，lang) }。。。}

1. 始终检查documentation以获取最新更新。

Answer 2

本文https://github.com/isaachinman/next-i18next/issues/1040解释了从next-i18next v7到v8迁移

​

var languages = [
  ['English', 'en'],
  ['French', 'fr']
]

export default function YourComponent() {
  const router = useRouter();

  const handleLocaleChange = (data)=>{
    router.replace(router.pathname, router.pathname, { locale: data })
  }
  return (
    <Menu onClick={handleLangMenuClick}>
      {languages.map((row, index) => (
      <Menu.Item key="en" onClick={(row[1]) =>handleLocaleChange(row[1])}>
          <a>{row[0]}</a>
      </Menu.Item>      
      )}

    </Menu>
   )
}

​