4

我在 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

但是，如果我将动态路由更改为静态，翻译就可以了。

工作文件夹结构示例：

  • 页面/翻译页面/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]”缺少 getStaticPaths。阅读更多： 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) async DevServer。

我通过添加getStaticPaths函数让它工作了

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

1 回答 1

0

I was able to solve this by adding the locale to the getStaticPaths function.

Considering your id is your file parameter ( [id].js ) what worked form me would look like this:


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"])),
    },
  }
}

After that, you don't need to have two folders, just keep pages/translated-page/[id].tsx (considering you'll only have dynamic routes).

In case you have a lot of routes or languages, consider running a small function to simply add {locale:lang} to all your paths.

于 2021-09-11T16:11:32.817 回答