nextjs router locale undefined

Question

I have done a lot of research and tried many things, but unfortunately, I haven't found a solution, so I had to ask again.

I am working locally on a project and now I want to add Internationalized Routing from nextjs to my project so that I can offer it in 2 languages... I read the documentation of nextjs and watched youtube tutorials and tried but it always comes back in locale:undefined and unfortunately I don't know why?

below you can see my codes... Can you maybe tell me what I am not doing right? or what I am doing wrong?

index.tsx

export default function Home({ posts }: Props) {
  const router = useRouter()
  const t = router.locale === 'de' ? de : tr

  console.log(router)

  return (
      <Header />
      <main className="flex w-full flex-1 flex-col items-center justify-center px-20 text-center">
        <h1 className="text-6xl font-bold">
          {t.title}
          <a className="text-blue-600" href="https://nextjs.org">
            Next.js!
          </a>
        </h1>

        <div>
          <Link href="/" locale="de">
            <a>DE </a>
          </Link>
          <Link href="/tr" locale="tr">
            <a>TR</a>
          </Link>
        </div>
)

next.config.js

/** @type {import('next').NextConfig} */
module.exports = {
  reactStrictMode: true,
  i18n: {
    locales: ['de', 'tr'],
    defaultLocale: 'de',
  },
}

locales/de.js

export const de = {
  title: 'Welcome to ',
}

Answer 1

Try this

export default function Home({ posts }: Props) {
  const router = useRouter()
  let t = "";

 useEffect(()=>{

   t = router.locale === 'de' ? de : tr
   
 },[]);

  return (
      </>
    Your Other Code ...
        </>
)