如何使用 Next.js 13^ 为服务器和客户端组件设置 i18next

Question

Next 社区，我在使用我也在使用的全新Next.js13配置国际化时遇到问题i18next。

\n

我恳请您的帮助，并可能提供一些工作设置的示例。

\n

这是我到目前为止所尝试过的\n（我正在使用新的“app”目录）

\n

//next-i18next-config.js\n\nmodule.exports = {\n  i18n: {\n    locales: [\'en\', \'de\'],\n    defaultLocale: \'en\',\n  },\n}\n

\n

// next.config.js\n\nconst { i18n } = require(\'./next-i18next-config\')\n\nconst nextConfig = {\n  reactStrictMode: true,\n  swcMinify: true,\n  experimental: { appDir: true },\n  i18n\n}\n\nmodule.exports = nextConfig\n

\n

public\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 favicon.ico\n\xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 locales\n    \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 de\n    \xe2\x94\x82   \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 translation.json\n    \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 en\n       \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 translation.json\n\n

\n

// package.json\n\n"dependencies": {\n    "i18next": "^22.0.4",\n    "next": "13.0.0",\n    "next-i18next": "^12.1.0",\n    "react-i18next": "^12.0.0",\n    "react": "18.2.0",\n    "react-dom": "18.2.0",\n    "sass": "^1.56.0",\n    "typescript": "4.8.4",\n  },\n

\n

服务器端问题- useTranslation 错误

\n

app/\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 approach\n\xe2\x94\x82   \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 page.tsx\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 layout.tsx\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 loading.tsx\n\xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 page.tsx\n

\n

import { use } from \'react\'\nimport { useTranslation } from \'next-i18next\' // I also tried \'react-i18next\'\n\nasync function getApproachPage() {\n  const res = await fetch(`${process.env.BASE_URL}/page/approach`, {\n    cache: \'no-store\', // SSR getServerSideProps\n  })\n\n  return res.json()\n}\n\nconst ApproachPage = () => {\n  const { t } = useTranslation() // Getting an Error here : (\n\n  const data = use(getApproachPage()) // TODO: implement res data in page after setting up translations\n\n  return (\n    <h1>{t(\'approach.title\')}</h1>\n  )\n}\n\nexport default ApproachPage\n

\n

客户端问题- 找不到 Translation.json 文件

\n

这就是我在 v12 及更低版本中进行配置的方式（链接）

\n

我无法理解的一件事是如何在 v13 中执行此操作

\n

export async function getStaticProps({ locale }) {\n  return {\n    props: {\n      ...(await serverSideTranslations(locale, [\'common\', \'home\'])),\n    }, \n  }\n}\n

\n

Answer 1

好吧，我终于弄清楚如何进行实际有效的设置了。

得益于这份极其详尽的指南，我能够理解如何实现它。我会把它传给其他有需要的人

https://locize.com/blog/next-13-app-dir-i18n/