我在Nextjs(v10.1.3(中有一个动态路由的页面/my-translation/[id]，我想使用next-i18next(v8.1.3(包来翻译这个页面。
我尝试在Nextjs中使用2文件夹结构，它们都给出了我无法理解的相同错误。
- 页面/翻译页面/[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和对于"/pranslated page/[id]"丢失。阅读更多：https://nextjs.org/docs/messages/invalid-getstaticpaths-value这生成页面时出错。任何控制台日志都将显示在终端窗口中。调用堆栈renderToHTMLfile:///C:/projects/my-project.io/web-apps/my-project/node_modules/next/dist/next-server/render.js(21:2118(file:///C:/projects/my-project.io/web-apps/my-project/node_modules/next/dist/next-server/server.js(112:126(__包装物file:///C:/projects/my-project.io/web-apps/my-project/node_modules/next/dist/lib/salesecd-function.js(1:341(file:///C:/projects/my-project.io/web-apps/my-project/node_modules/next/dist/lib/salesecd-function.js(1:377(DevServer.renderToHTML带组件file:///C:/projects/my-project.io/web-apps/my-project/node_modules/next/dist/next-server/server.js(137:120(运行Microtasks处理Ticks和Rejectionsinternal/process/task_queues.js(93:5(异步DevServer.renderToHTMLfile:///C:/projects/my-project.io/web-apps/my-project/node_modules/next/dist/next-server/server.js(138:923(异步DevServer.renderToHTMLfile:///C:/projects/my-project.io/web-apps/my-project/node_modules/next/dist/server/next-dev-server.js(35:578(异步DevServer.renderfile:///C:/projects/my-project.io/web-apps/my-project/node_modules/next/dist/next-server/server.js(75:236(异步对象.fnfile:///C:/projects/my-project.io/web-apps/my-project/node_modules/next/dist/next-server/server.js(59:580(async Router.executefile:///C:/projects/my-project.io/web-apps/my-project/node_modules/next/dist/next-server/router.js(25:67(异步DevServer.runfile:///C:/projects/my-project.io/web-apps/my-project/node_modules/next/dist/next-server/server.js(69:1042(异步DevServer.handleRequestfile:///C:/projects/my-project.io/web-apps/my-project/node_modules/next/dist/next-server/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,
};
};
我能够通过向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}添加到所有路径中。
您需要将locale关键字添加到getStaticPaths中的每个路径中。
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,
};
}