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

【问题标题】：next-i18next - Is it possible to change default language dynamically?next-i18next - 是否可以动态更改默认语言？
【发布时间】：2021-01-14 22:42:22
【问题描述】：

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

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

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

编辑：我也在使用 localeSubpaths，所以这就是我尝试调查该主题的原因。

【问题讨论】：

当然可以。最初，您可以分配您想要的任何值，这也可能取决于其他事情。
谢谢 Johannes，我忘了说我正在使用 localeSubpaths 配置。用这个设置可以做到吗？
当然，我的意思是 localeSubpaths 只是一种基于语言环境重写 url 的语言环境部分的方法。这与设置默认语言关系不大。

标签： javascript next.js next-i18next

【解决方案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>
    .
    .
  )

.
.
}

但你必须记住：

在首次渲染时，默认语言将始终引用浏览器发送的Accept- Language 标头。换言之，默认语言将基于您的目标用户的浏览器语言设置。

假设浏览器发送的Accept-Language标头如下（de和it都存在）：
```
Accept-Language: de, de;q=0.9, it;q=0.8, en;q=0.7, *;q=0.5

# Note: the `q` value may be differs, the bigger will get the most priority
```
那么默认语言将为German，忽略next-i18next.config.js处的配置defaultLocale。
如果de 和it 都没有在Accept-Language 中列出，例如：
```
Accept-Language: fr-CH, fr;q=0.9, en;q=0.8, cn;q=0.7, *;q=0.5
```
那么默认语言将是Italian 按照我们的配置制作。
出于开发目的，我们可以更改浏览器语言设置（我使用谷歌浏览器）chrome://settings/?search=language 并订购语言根据您的喜好。

我们可以通过编程设置下一次渲染的默认语言将NEXT_LOCALE cookie 添加到目标用户的浏览器，基于他们选择。示例：

import cookie from 'react-cookies'
.
.
.  

export default function YourComponent() {
  .
  .

  setDefaultLang = (lang) => {
     cookie.save('NEXT_LOCALE', lang)
  }
  .
  .
  .
}

请随时查看documentation 以获取最新更新。

【讨论】：

我们如何强制第一次渲染的语言环境，我们没有设置任何 cookie ？？？在这里提问reddit.com/r/nextjs/comments/pooyhh/…。如果不覆盖 server.js，我认为无法在下一个后端拦截此逻辑，这是不好的做法

【解决方案2】：

next-i18next v7 到 v8 的迁移通过这篇文章来解释https://github.com/isaachinman/next-i18next/issues/1040

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>
   )
}

【讨论】：