title: getStaticProps not working with getInitialProps in Nextjs
body: <p>In my _document.js, I have some styles configured. This is my _document.js</p>
  <pre><code>import React from &quot;react&quot;;
  import Document, {Html ,Head, Main, NextScript } from &quot;next/document&quot;;
  import { ServerStyleSheets } from &quot;@material-ui/styles&quot;;
  
  class MyDocument extends Document {
    render() {
      return (
        &lt;Html lang=&quot;en&quot;&gt;
          &lt;Head&gt;
            &lt;meta charSet=&quot;utf-8&quot; /&gt;
            &lt;meta name=&quot;theme-color&quot; content=&quot;#000000&quot; /&gt;
            &lt;link rel=&quot;shortcut icon&quot; href={require(&quot;assets/img/favicon.png&quot;)} /&gt;
            &lt;link
              rel=&quot;apple-touch-icon&quot;
              sizes=&quot;76x76&quot;
              href={require(&quot;assets/img/apple-icon.png&quot;)}
            /&gt;
            {/* Fonts and icons */}
            &lt;link
              rel=&quot;stylesheet&quot;
              type=&quot;text/css&quot;
              href=&quot;https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:400,700|Material+Icons&quot;
            /&gt;
            &lt;link
              href=&quot;https://use.fontawesome.com/releases/v5.0.10/css/all.css&quot;
              rel=&quot;stylesheet&quot;
            /&gt;
          &lt;/Head&gt;
          &lt;body&gt;
            &lt;div id=&quot;page-transition&quot;&gt;&lt;/div&gt;
            &lt;Main /&gt;
            &lt;NextScript /&gt;
          &lt;/body&gt;
        &lt;/Html&gt;
      );
    }
  }
    
  MyDocument.getInitialProps = async ctx =&gt; {
    // Resolution order
    //
    // On the server:
    // 1. app.getInitialProps
    // 2. page.getInitialProps
    // 3. document.getInitialProps
    // 4. app.render
    // 5. page.render
    // 6. document.render
    //
    // On the server with error:
    // 1. document.getInitialProps
    // 2. app.render
    // 3. page.render
    // 4. document.render
    //
    // On the client
    // 1. app.getInitialProps
    // 2. page.getInitialProps
    // 3. app.render
    // 4. page.render
  
    // Render app and page and get the context of the page with collected side effects.
    const sheets = new ServerStyleSheets();
    const originalRenderPage = ctx.renderPage;
  
    ctx.renderPage = () =&gt;
      originalRenderPage({
        enhanceApp: App =&gt; props =&gt; sheets.collect(&lt;App {...props} /&gt;)
      });
  
    const initialProps = await Document.getInitialProps(ctx);
  
    return {
      ...initialProps,
      // Styles fragment is rendered after the app and page rendering finish.
      styles: [
        &lt;React.Fragment key=&quot;styles&quot;&gt;
          {initialProps.styles}
          {sheets.getStyleElement()}
        &lt;/React.Fragment&gt;
      ]
    };
  };
  
  export default MyDocument;
  </code></pre>
  <p>Now, when I try to use getStaticProps to get data from an API, it gives me a server error as,</p>
  <pre><code>TypeError: 'Cannot read property of 'data' undefined'
  </code></pre>
  <p>my code in index.js</p>
  <pre><code>export const getStaticProps = async () =&gt; {
    const res = await fetch(&quot;http://localhost:8055/items/gallery2&quot;);
    const dataa = await res.json();
    return {
      props: { gallery: dataa },
    };
  };
  </code></pre>
  <p>when I try to do,</p>
  <pre><code>{gallery.data.map(image_url =&gt; (
  &lt;div&gt;
  &lt;/div&gt;
  ))
  </code></pre>
  <p>It gives me the typeError mentioned below.
  What should I do to get it to start working?
  PS: I'm using the getStaticProps inside index.js. I don't know why this error occurs, please help me with this.</p>
  <p>Thank you!
  Edit 1:
  My console error:</p>
  <pre><code>Uncaught     at Cardd (file://D:\projects\nextjs-material-kit-master\.next\server\pages\components.js:15365:14)
      at processChild (file://D:\projects\nextjs-material-kit-master\node_modules\react-dom\cjs\react-dom-server.node.development.js:3043:14)
      at resolve (file://D:\projects\nextjs-material-kit-master\node_modules\react-dom\cjs\react-dom-server.node.development.js:2960:5)
      at ReactDOMServerRenderer.render (file://D:\projects\nextjs-material-kit-master\node_modules\react-dom\cjs\react-dom-server.node.development.js:3435:22)
      at ReactDOMServerRenderer.read (file://D:\projects\nextjs-material-kit-master\node_modules\react-dom\cjs\react-dom-server.node.development.js:3373:29)
      at renderToString (file://D:\projects\nextjs-material-kit-master\node_modules\react-dom\cjs\react-dom-server.node.development.js:3988:27)
      at renderPage (file://D:\projects\nextjs-material-kit-master\node_modules\next\dist\next-server\server\render.js:54:851)
      at Object.ctx.renderPage (file://D:\projects\nextjs-material-kit-master\.next\server\pages\_document.js:1629:26)
      at Function.getInitialProps (file://D:\projects\nextjs-material-kit-master\.next\server\pages\_document.js:699:19)
      at Function.module.exports../pages/_document.js.MyDocument.getInitialProps (file://D:\projects\nextjs-material-kit-master\.next\server\pages\_document.js:1640:83)
      at loadGetInitialProps (file://D:\projects\nextjs-material-kit-master\node_modules\next\dist\next-server\lib\utils.js:5:101)
      at renderToHTML (file://D:\projects\nextjs-material-kit-master\node_modules\next\dist\next-server\server\render.js:54:1142)
      at runMicrotasks (&lt;anonymous&gt;)
      at processTicksAndRejections (internal/process/task_queues.js:93:5)
      at async (file://D:\projects\nextjs-material-kit-master\node_modules\next\dist\next-server\server\next-server.js:109:97)
      at async __wrapper (file://D:\projects\nextjs-material-kit-master\node_modules\next\dist\lib\coalesced-function.js:1:330)
  </code></pre>