如何在 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。

但是nextJS中不存在window

出现该错误： 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 = [];

...

但这仅适用于 function 组件。

我尝试将条件放入 function 并返回 let 翻译，并使用带括号的翻译（{Translate().header.something}）但没有用。

我也尝试使用它（但不起作用）：

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

而且我不能使用钩子或组件做/将安装。

我的代码图片：

我的文件夹组织

翻译的

翻译代码

我将如何导入

EN JSON

我需要使用翻译的其他 JSON

试图在我的 _app (laoult) 中做一个 useEffect

Window在JS脚本中验证并带JSON文件翻译存档

Answer 1

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

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

在您的情况下，据我了解，您正在尝试检查语言并从 pt 文件返回内容，并进一步在另一个反应组件中使用它作为 header 选项。

这可能有效，将您的翻译文件更改为 function -

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 function 的反应文件中使用它 -

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 
}

我只是在我的项目中使用，比如 function：

{traducao().homeText.button_text}

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