如何在nextJS中检测和使用页面语言(ReferenceError:窗口未定义)

Question

我正试图创建一个可以识别国家和设置语言的网站。

为了在react中做到这一点，我使用调用thw-window.navigator.language。整个文件：

import * as pt from "./pt";
import * as en from './en';
let translate;
if (window.navigator.language == 'pt-PT' || window.navigator.language == 'pt-BR') {
translate = pt.default;
} else {
translate = en.default;
}
export default translate

pt/en用所有文本归档其唯一的JSONS。

但是nextJS 中不存在窗口

出现该错误：ReferenceError:窗口未定义

我需要使用一个反应文件。因为我只是这样导入和使用：｛翻译.header.label_opts_clients｝

我将导入并在XML(react(文件和JSON文件中使用它类似：

export const headerOptions = [
{
title: "`${Translate.header.label_opts_home}`",
...

我该怎么做？我知道存在useRouter(hook(，所以如果你需要在页面中获取url，你可以使用。我已经遇到了这个问题，我用这个解决了：

...
const { pathname } = useRouter()

const [crumbs, setCrumbs] = useState<string[]>();
useEffect(()=>{
renderCrumbs()
},[pathname])
const setHref = (links:string[], index:number|string) => {
let linkPath = ""

for (let i = 0; i <= index; i++) {      
linkPath = linkPath + "/" + links[i]      
}
return linkPath
}
const renderCrumbs = () => {
let links = pathname.split('/').slice(1);
let limit = links.length;
let array = [];
...

但这只是在一个功能组件中工作。

我试着把条件放在一个函数中，然后返回let translate，并使用带括号的translate({translate((.header.something}(，但没有成功。

我也试过用这个(但不起作用(：

if (window !== undefined) {
// browser code
}

我不能使用挂钩或组件。

我的代码图片：

我的文件夹组织

翻译

翻译代码

我将如何导入

EN JSON

我需要使用翻译的另一个JSON

尝试在我的_app(laoult(中使用效果

JS脚本中的窗口验证，并带来JSON文件来翻译档案

Answer 1

我找到了。如果你使用的是NextJS v10.0.0，你可以使用一个新的高级功能。

国际化路由-i18n

https://nextjs.org/docs/advanced-features/i18n-routing

首先，您需要配置next.config.js并添加i18n模块导出。如果你已经有了一些其他插件(比如我(，你需要把它们放在一起。

const withImages = require('next-images')
const path = require('path')
module.exports = withImages({
esModule: false,
i18n: {
locales: ['en-US', 'pt-BR', 'pt-PT', 'es-ES'],
defaultLocale: 'pt-BR',
},
});

在为我想要的语言配置了我的项目后，我转到我的翻译文件，并使用了下一个钩子-useRouter from next/router

import * as pt from "./pt";
import * as en from './en';
import { useRouter } from "next/router"
export const traducao = () =>{
let routes = useRouter();
let translate;

if (routes.locale == 'pt-PT' || routes.locale == 'pt-BR') {
translate = pt.default;
} else {
translate = en.default;
}

return translate 
}

我只是在我的项目中使用了一个函数：

｛traducao((.homeText.button_text｝

工作良好，能识别浏览器语言并切换。但不幸的是，你不能在Json中使用，因为你使用的是钩子，而钩子只在函数组件中工作。

Answer 2

一旦呈现DOM，就可以引用窗口对象。通常，它被用在useEffect钩子上，比如so-

useEffect(() => {
console.log(window) // window is not undefined here
}, [])

在您的情况下，据我所知，您正试图检查语言并返回pt文件中的内容，并在另一个react组件中进一步使用它作为头选项。

以下是可能有效的方法，将您的翻译文件更改为一个函数-

import * as pt from './pt'
import * as en from './en'
const translate = (window) => {
const { language } = window.navigator

if(language == 'pt-PT' || language == 'pt-BR') return pt.default
else return en.default
}
export default translate

现在在useEffect函数-中的反应文件中使用它

import translate from 'YOUR_PATH_TO_TRANSLATE'
const SomeReactComponent = (props) => {
useEffect(() => {
const translatedData = translate(window) // now window is defined
let headerData = {
title: translatedData.header.label_opts_home
... 
}


}, []) // componentDidMount in classes
}

或者，如果你想从一个单独的文件中获得JSON头数据，你可以创建一个单独文件，比如so-

import translate from 'YOUR_PATH_TO_TRANSLATE'
const getHeaderData = (window) => {
const translatedData = translate(window) // now window is defined
let headerData = {
title: translatedData.header.label_opts_home
... 
}
return headerData
}

然后，在你的主要组件中使用它，比如

import getHeaderData from 'YOUR_PATH_TO_GETHEADERDATA'
const SomeReactComponent = (props) => {
useEffect(() => {
let headerData = getHeaderData(window)
}, [])
}

我希望这能奏效。