无法导出带有 getServerSideProps 的 nextjs 页面

Posted 2023-03-30

【中文标题】无法导出带有 getServerSideProps 的 nextjs 页面

【英文标题】：nextjs pages with getServerSideProps can not be exported

【发布时间】：2020-11-13 10:36:03

【问题描述】：

我最近开始学习和使用 next.js，我构建了一个简单的 cpanel 页面，它应该在每次请求页面时获取数据（如 react 的 useEffect 挂钩），所以我尝试使用 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 挂钩来获取道具，但你知道，getServerSideProps 更好，因为它在渲染页面之前获取道具，从而提升页面。 这是 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;

【参考方案1】：

请注意：在 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;

【讨论】：

是的，但我没有显示整个代码，我最终需要编辑状态，我也通过不导出应用程序解决了这个问题，只是 bcs getServerSideProps 仅在服务器端可用渲染模式，并导出它会创建一个静态站点，谢谢