javascript - NextJS i18n - Locale getting undefined

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 ing 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);

and it prints:

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

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 ing 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);

and it prints:

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

Share Improve this question asked Dec 1, 2021 at 20:53 Maykel Esser 3193 silver badges15 bronze badges

Shouldn't locale === 'pt' be locale === 'pt-BR'? – timewastingprofessional Commented Dec 2, 2021 at 0:53
Also you can const locale = router.locale – illia chill Commented Dec 2, 2021 at 8:37
Is that the only thing you have in your next.config.js? Did you restart the dev server after making the changes to the config file? – juliomalves Commented Dec 2, 2021 at 20:00
@thegman1001 i've tried pt-BR too. Nothing happens – Maykel Esser Commented Dec 3, 2021 at 18:51
@illiachill ill try – Maykel Esser Commented Dec 3, 2021 at 18:52

| Show 1 more ment

3 Answers 3

Sorted by: Reset to default 3

UPDATE: I did a restart of my puter, 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!

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!.

Just restart the server. If the next.config.js file is modified, you have to restart your server for the changes to take effect

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - NextJS i18n - Locale getting undefined - Stack Overflow

3 Answers 3

与本文相关的文章

评论列表(0)