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

Im trying to make a site that could identify the country and set the language.

To do this in react i use to call thw window.navigator.language. The entire file:

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

the pt / en files its just JSONS with all texts.

But window doesnt exist in nextJS

That error appears: ReferenceError: window is not defined

I need to use out of a react file. Because i just import and use like this: {Translate.header.label_opts_clients}

I will import and I use this in a XML (react) file and in a JSON file like:

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

How can i do this? I know that exist useRouter(hook), so if you need to take the url in a page you can use. I already had that problem, and i solved with this:

...

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 = [];

...

But this just work in a function component.

I tried to put the condition in a function and return the let translate, and use the translate with parentheses ({Translate().header.something}) but didnt work.

I tried to use this too (but doesnt work):

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

And i cant use hooks or components did/will mounth.

My code pictures:

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

I found. If you are using NextJS v10.0.0 you can use a new advanced feature.

Internationalized Routing – i18n

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

First of all you need to config your next.config.js and add the i18n module export. If you already had some other plugins (like me) you will need to put them together.

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',
      },
});

With my project configured for the languages that i want, I went to my translation file and used a next hook – 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 
}

And the i just use in my project like a function:

{traducao().homeText.button_text}

Work well, recognizes the browser language and switche. But unfortunaly you cant use in a Json, because you are using a hook, and hooks just works in a function component.