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

Question

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

我尝试在Nextjs中使用两个文件夹结构，它们都给出了我无法掌握的相同错误。

• pages/translated-page/id/index.tsx
• pages/translated-page/id.tsx

但是，如果我将动态路由更改为静态路由，则会产生翻译效果。

工作文件夹结构示例：

• pages/translated-page/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: ["/translated-page/id", { params: { id: "" } }],
    ...(await serverSideTranslations(locale, ["my-translation"])),
  },
});

export default TranslatedPage;

我得到了下面的动态路径错误，我无法从提供的链接中掌握我做错了什么。

服务器错误:动态SSG页面需要getStaticPaths，而“/translated/id”缺少getStaticPaths。阅读更多信息：https://nextjs.org/docs/messages/invalid-getstaticpaths-value这个错误发生在生成页面时。任何控制台日志都将显示在终端窗口中。呼叫堆栈file:///C:/projects/my-project.io/web-apps/my-project/node_modules/next/dist/next-server/server/render.js (21:2118) file:///C:/projects/my-project.io/web-apps/my-project/node_modules/next/dist/next-server/server/next-server.js (112:126) __wrapper file:///C:/projects/my-project.io/web-apps/my-project/node_modules/next/dist/lib/coalesced-function.js (1:341) file:///C:/projects/my-project.io/web-apps/my-project/node_modules/next/dist/lib/coalesced-function.js (1:377) DevServer.renderToHTMLWithComponents file:///C:/projects/my-project.io/web-apps/my-project/node_modules/next/dist/next-server/server/next-server.js (137：120) file:///C:/projects/my-project.io/web-apps/my-project/node_modules/next/dist/next-server/server/next-server.js file:///C:/projects/my-project.io/web-apps/my-project/node_modules/next/dist/server/next-dev-server.js (93:5)异步DevServer.renderToHTML DevServer.renderToHTML (138:923)异步DevServer.renderToHTML file:///C:/projects/my-project.io/web-apps/my-project/node_modules/next/dist/server/next-dev-server.js (35:578)异步file:///C:/projects/my-project.io/web-apps/my-project/node_modules/next/dist/next-server/server/next-server.js (75:236)异步file:///C:/projects/my-project.io/web-apps/my-project/node_modules/next/dist/next-server/server/next-server.js (59:580)异步Router.execute file:///C:/projects/my-project.io/web-apps/my-project/node_modules/next/dist/next-server/server/router.js (25:67)异步DevServer.run file:///C:/projects/my-project.io/web-apps/my-project/node_modules/next/dist/next-server/server/next-server.js (69:1042)异步DevServer.handleRequest file:///C:/projects/my-project.io/web-apps/my-project/node_modules/next/dist/next-server/server/next-server.js (34:504)

我是通过添加getStaticPaths函数来工作的

  export const getStaticProps = async ({ locale }) => ({
    props: {
      ...(await serverSideTranslations(locale, ["my-translation"])),
    },
  });
    
  export const getStaticPaths = async () => {
    return {
      paths: ["/my-translation/id"],
      fallback: true,
    };
  };

Answer 1

我能够通过将区域设置添加到getStaticPaths函数来解决这个问题。

考虑到您的id是您的文件参数( id.js )，我的工作方式如下所示：

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 getStaticPaths = async () => {
    return {
      paths: [
      { params: { type: "id" }, locale: "es" },
      { params: { type: "id" }, locale: "en" },
      ]
      fallback: true,
    };
  };

export async function getStaticProps(context) {
  return {
    props: {
      params: context.params,
      ...(await serverSideTranslations(context.locale, ["my-translation"])),
    },
  }
}

在此之后，您不需要有两个文件夹，只需保存pages/translated page/id.tsx(考虑到您只有动态路由)。

如果您有很多路由或语言，可以考虑运行一个小函数来简单地将{locale:lang}添加到所有路径中。

Answer 2

您需要在getStaticPaths中的每个路径中添加locale关键字。

export async function getStaticPaths({ locales }) {
  const categories = [{id:"id1"},{id:"1d2"}];
  const paths = categories.flatMap((category) => {
    return locales.map((locale) => {
      return {
        params: {
          type: category.id,
        },
        locale: locale,
      };
    });
  });
  return {
    paths: paths,
    fallback: true,
  };
}