我最近开始学习和使用 next.js,我已经构建了一个简单的 cpanel 页面,它应该在每次请求页面时获取数据(如 react 的 useEffect 钩子(Hook)),所以我尝试使用 getServerSideProps,它运行良好本地开发服务器,但是当我执行 npm run dev (运行下一个构建 && 下一个导出)时,它开始构建,然后当它开始导出时,它给了我这个错误:Error occurred prerendering page "/". Read more: https://err.sh/next.js/prerender-error Error: Error for page /: pages with getServerSideProps can not be exported. See more info here: https://err.sh/next.js/gssp-export
.
我真的很困惑,从最后一天开始我一直在尝试用谷歌搜索这个问题,但找不到任何有用的东西,现在如果我找不到任何解决方案,我将只使用 react 的 useEffect 钩子(Hook)来获取 Prop ,但是你知道,getServerSideProps 更好,因为它在渲染页面之前获取 Prop ,从而提升页面。
这是 index.js 页面代码:
// /pages/index.js
import Layout from "../components/Layout/Layout.js";
import PanelWrapper from "../components/panel/panelWrapper.js";
import getEnrolls from "../components/fetch/fetch.js";
import { API } from "../exports/config.js";
const PanelPage = ({ all, pending, accepted }) => {
const [allEnrolls, setAllEnrolls] = React.useState(all);
const [pendingEnrolls, setPendingEnrolls] = React.useState(pending);
const [acceptedEnrolls, setAcceptedEnrolls] = React.useState(accepted);
const [status, setStatus] = React.useState("all");
const [allPage, setAllPage] = React.useState(allEnrolls.currentPage);
const [pendingPage, setPendingPage] = React.useState(
pendingEnrolls.currentPage
);
const [acceptedPage, setAcceptedPage] = React.useState(
acceptedEnrolls.currentPage
);
//some functions in here
return (
<Layout>
<PanelWrapper
all={allEnrolls}
pending={pendingEnrolls}
accepted={acceptedEnrolls}
/>
</Layout>
);
};
export const getServerSideProps = async () => {
const { all, pending, accepted } = await getEnrolls();
return {
props: {
all,
pending,
accepted,
},
};
};
export default PanelPage;
最佳答案
请注意:PanelPage 函数中不需要使用 state 并从解构的 props 对象中分配值。您的代码可以更短、更干净。
我也对你的 getServerSideProps
做了一些小改动功能一样。
import react, { useState } from "react";
import Layout from "../components/Layout/Layout.js";
import PanelWrapper from "../components/panel/panelWrapper.js";
import getEnrolls from "../components/fetch/fetch.js";
import { API } from "../exports/config.js";
const PanelPage = ({ all, pending, accepted }) => {
const [status, setStatus] = useState("all");
const [allPage, setAllPage] = useState(all.currentPage);
const [pendingPage, setPendingPage] = useState(
pending.currentPage
);
const [acceptedPage, setAcceptedPage] = useState(
accepted.currentPage
);
//some functions in here
return (
<Layout>
<PanelWrapper
all={all}
pending={pending}
accepted={accepted}
/>
</Layout>
);
};
export async function getServerSideProps() {
const res = await getEnrolls();
const { all, pending, accepted } = await res.json();
return {
props: {
all,
pending,
accepted,
},
};
};
export default PanelPage;
关于reactjs - 无法导出带有 getServerSideProps 的 nextjs 页面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63058697/