[英]next-i18next - Is it possible to change default language dynamically?
I'm using next-i18next to handle internationalization of my next.js app.我正在使用 next-i18next 来处理我的 next.js 应用程序的国际化。
Is it possible to change default language dynamically?是否可以动态更改默认语言? For example based on the top level domain?
例如基于顶级域名?
const defaultLanguage = topLevelDomain === "de" : "de" ? "it";
EDIT: I'm also using localeSubpaths so that's why I'm trying to investigate the topic.编辑:我也在使用 localeSubpaths,所以这就是我试图调查该主题的原因。
For someone who use Nextjs v10.0.0
up as written here , we have to use the newest configurations .有人谁使用Nextjs
v10.0.0
了书面这里,我们必须使用最新的配置。
next-i18next.config.js
module.exports = {
i18n: {
defaultLocale: 'it',
locales: ['it', 'de'],
},
}
next.config.js
const { i18n } = require('./next-i18next.config')
module.exports = {
i18n,
}
And to change the language we have to use next/link
and next/router
:要更改语言,我们必须使用
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>
.
.
)
.
.
}
But you have to bear in mind, that:但你必须牢记:
At first render , the default language will always refer to the Accept- Language
header sent by the browser.在第一次渲染时,默认语言将始终引用浏览器发送的
Accept- Language
标头。 In other words, the default language will be based on your target user's browser language settings.换句话说,默认语言将基于目标用户的浏览器语言设置。
Let say that Accept-Language
header sent by the browser is as follows (both de
and it
exists):假设浏览器发送的
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
then the default language will be German
, ignoring the configuration defaultLocale
at next-i18next.config.js
.那么默认语言将是
German
,忽略next-i18next.config.js
的配置defaultLocale
。
If both de
and it
not listed in Accept-Language
for example:如果
de
和it
没有在Accept-Language
列出,例如:
Accept-Language: fr-CH, fr;q=0.9, en;q=0.8, cn;q=0.7, *;q=0.5
then the default language will be Italian
following the configuration we made.然后根据我们所做的配置,默认语言将是
Italian
。
For development purposes, we can change the browser language settings (I use google chrome) at chrome://settings/?search=language
and order the languages based on your preference.出于开发目的,我们可以在
chrome://settings/?search=language
更改浏览器语言设置(我使用谷歌浏览器),并根据您的喜好对语言进行排序。
We can set the default language for the next render by programmatically add NEXT_LOCALE
cookies to the target user's browser, based on their selection.我们可以根据他们的选择,以编程方式将
NEXT_LOCALE
cookie 添加到目标用户的浏览器,从而为下一次渲染设置默认语言。 Example:例子:
import cookie from 'react-cookies' . . . export default function YourComponent() { . . setDefaultLang = (lang) => { cookie.save('NEXT_LOCALE', lang) } . . . }
Always check the documentation to get the newest update.始终检查文档以获取最新更新。
Of course, you can change.当然,你可以改变。 You should disable localeDetection and it will work fine:
您应该禁用localeDetection ,它会正常工作:
const path = require('path');
module.exports = {
i18n: {
locales: ['ru', 'uz', 'en'],
defaultLocale: 'ru',
localeDetection: false,
},
localePath: path.resolve('./public/locales'),
};
Migration from next-i18next v7 to v8 is explain through this articles https://github.com/isaachinman/next-i18next/issues/1040这篇文章解释了从 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> ) }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.