小编mei*_*ree的帖子

如何在 nextjs 应用程序的动态路由页面上添加 next-i18next 翻译?

我在 Nextjs (v10.1.3) /my-translation/[id]中有一个动态路由页面,我想使用 next-i18next (v8.1.3) 包来翻译此页面。

我尝试在 Nextjs 中使用 2 个文件夹结构,它们都给出了我无法理解的相同错误。

  • 页面/翻译页面/[id]/index.tsx
  • 页面/翻译页面/[id].tsx

但是,如果我将动态路由更改为静态路由,则转换会起作用。

工作文件夹结构示例:

  • 页面/翻译页面/id.tsx
import { serverSideTranslations } from "next-i18next/serverSideTranslations";
import { useRouter } from "next/router";
import { useTranslation } from "next-i18next";

const TranslatedPage = () => {
  const { t } = useTranslation("my-translation");
  const router = useRouter();
  const { id } = router.query;

  return (
      <div>
         {t("existing-translation-key-from-my-translation-json")}
      </div>
  );
};

export const getStaticProps = async ({ locale }) => ({
  props: {
    fallback: true,
    paths: …
Run Code Online (Sandbox Code Playgroud)

reactjs next.js next-i18next

12
推荐指数
1
解决办法
9708
查看次数

标签 统计

next-i18next ×1

next.js ×1

reactjs ×1