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

问题描述

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

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

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-page/[id]”。阅读更多： https://nextjs.org/docs/messages/invalid-getstaticpaths-value 这个生成页面时发生错误。任何控制台日志都将是显示在终端窗口中。调用堆栈 renderToHTML 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) runMicrotasks processticksAndRejections internal/process/task_queues.js (93:5) 异步 DevServer.renderToHTML file:///C:/projects/my-project.io/web-apps/my-project/node_modules/next/dist/next-server/server/next-server.js (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) 异步 DevServer.render file:///C:/projects/my-project.io/web-apps/my-project/node_modules/next/dist/next-server/server/next-server.js (75:236) 异步 Object.fn 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,});
    
  export const getStaticPaths = async () => {
    return {
      paths: ["/my-translation/id"],fallback: true,};
  };

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

next-i18next reactjs reactjs