How to detect and use the page language in nextJS (ReferenceError: window is not defined)

Question

我正在尝试制作一个可以识别国家和设置语言的网站。

为了在反应中做到这一点，我习惯调用 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 包含所有文本。

但是window在nextJS中不存在

出现那个错误：ReferenceError: window is not defined

我需要使用一个反应文件。因为我只是像这样导入和使用： {Translate.header.label_opts_clients}

我将导入并在 XML（反应）文件和 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 = [];

...

但这只适用于函数组件。

我尝试将条件放入函数中，return 让翻译，并使用带括号的翻译 ({Translate().header.something}) 但没有成功。

我也试过用这个（但没用）：

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

而且我不能使用挂钩或组件 did/will mounth.

我的代码图片：

My folder organization

The translates

The translate code

How i will import

The EN JSON

My other JSON that i need to use the translate

trying to do a useEffect in my _app (laoult)

Window verification in JS script and brought the JSON file to translate archive

Answer 1

window object 可以在 DOM 渲染后被引用。通常，它在 useEffect hook 中使用，就像这样 -

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

在您的情况下，据我了解，您正在尝试检查语言和 return pt 文件中的内容，并在另一个反应组件中进一步将其用作 header 选项。

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

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

现在在你的 react 文件中的 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 header 数据，你可以像这样创建一个单独的文件 -

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)
    }, [])
}

我希望这能奏效。

Answer 2

我找到了。如果您使用的是 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',
      },
});

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

中的 useRouter
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 }

我只是在我的项目中像函数一样使用：

{译文().homeText.button_text}

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

How to detect and use the page language in nextJS (ReferenceError: window is not defined)

How to detect and use the page language in nextJS (ReferenceError: window is not defined)

javascript

node.js

reactjs

server-side-rendering

next.js