nextjs pages with getServerSideProps can not be exported

Question

I've recently started learning and working with next.js, i've build a simple cpanel page, and it should get data on everytime the page is requested (like react's useEffect hook), so I tried using getServerSideProps, it worked fine on local dev server, but when i do npm run dev (which runs next build && next export), it starts building and then when it starts exporting it gives me this error:

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.

I'm really confused, I've been trying to google the problem since the last day and couldn't find anything useful, now if I don't find any solution i'll just use react's useEffect hook to fetch the props, but u know, getServerSideProps is way better as it gets the props before rendering the page which boosts the page. this is the index.js page code:

//  /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;

Hooman Hooman · Accepted Answer · 2020-07-24T07:57:01

Please note that: it is not necessary to use state and assign the values from the destructured props object in PanelPage function. Your code can be shorter and cleaner.

I also made a few small changes in your getServerSideProps function as well.

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;

nextjs pages with getServerSideProps can not be exported

1 Answers