nextjs 路由器语言环境未定义

Question

我做了很多研究，尝试了很多东西，但不幸的是，我还没有找到解决办法，所以我不得不再问一次。

我正在本地处理一个项目，现在我想将 nextjs 的国际化路由添加到我的项目中，以便我可以提供 2 种语言的版本...我阅读了 nextjs 的文档并观看了 youtube 教程并尝试过但是它总是在 locale:undefined 回来，不幸的是我不知道为什么？

下面你可以看到我的代码...你能告诉我我做错了什么吗？或者我做错了什么？

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

试试这个


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

 useEffect(()=>{

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

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

nextjs 路由器语言环境未定义

nextjs router locale undefined

javascript

internationalization

reactjs

next.js