title: nextjs pages with getServerSideProps can not be exported
body: <p>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 &amp;&amp; next export), it starts building and then when it starts exporting it gives me this error:</p>
  <p><code>Error occurred prerendering page &quot;/&quot;. 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</code>.</p>
  <p>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:</p>
  <pre class="lang-js prettyprint-override"><code>//  /pages/index.js
  
  import Layout from &quot;../components/Layout/Layout.js&quot;;
  import PanelWrapper from &quot;../components/panel/panelWrapper.js&quot;;
  import getEnrolls from &quot;../components/fetch/fetch.js&quot;;
  import { API } from &quot;../exports/config.js&quot;;
  
  const PanelPage = ({ all, pending, accepted }) =&gt; {
    const [allEnrolls, setAllEnrolls] = React.useState(all);
    const [pendingEnrolls, setPendingEnrolls] = React.useState(pending);
    const [acceptedEnrolls, setAcceptedEnrolls] = React.useState(accepted);
  
    const [status, setStatus] = React.useState(&quot;all&quot;);
  
    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 (
      &lt;Layout&gt;
        &lt;PanelWrapper
          all={allEnrolls}
          pending={pendingEnrolls}
          accepted={acceptedEnrolls}
        /&gt;
      &lt;/Layout&gt;
    );
  };
  
  export const getServerSideProps = async () =&gt; {
    const { all, pending, accepted } = await getEnrolls();
    return {
      props: {
        all,
        pending,
        accepted,
      },
    };
  };
  
  export default PanelPage;
  </code></pre>