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

and it prints:
enter image description here

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