I'm trying to migrate my website to NextJS, and I'm having trouble to do some internationalization.
I'm following the tutorial from Documentation itself, but my locale in the inspector is coming up as undefined.
What i'm doing wrong? I'm using the latest version of nextJS.
Im trying to get some info from console.log.
console.log("Locale: " + locale);
console.log(router);
next.config.js
module.exports = {
i18n: {
locales: ['en-US', 'pt-BR'],
defaultLocale: 'pt-BR',
},
}
/pages/index.js
import Head from 'next/head'
import { useRouter } from 'next/router'
import pt from '../locale/index/pt'
import en from '../locale/index/en'
export default function Home() {
const router = useRouter();
const { locale } = router;
const t = locale === 'pt' ? pt : en;
return (
<div className="container">
<Head>
<title>{t.title}</title>
</Head>
</div>
)
}
/locale/pt.js
export default {
title: "Teste Portugues."
}
/locale/en.js
export default {
title: "Test English"
}
Some random info: NextJS Version: 12.0.4 Chrome Version: 96.0.4664.55 Node Version: 17.0.1
This seems to be a bug in older versions of Next.js. yesterday, I had a similar issue, and after upgrading Next, React, and React-dom to their latest version, it worked like charm!.
UPDATE: I did a restart of my computer, and after this, 3 days later, when i use console.log({locale}), it get my pt-BR locale normally.
(And i did nothing more)
So, i'll close the thread. Thanks anyway!