title: Next.js Compile error, property undefined
body: <p>So there is a indexpage with components, listing ads.</p>
  <pre><code>const App = ({ads}) =&gt; (
    { (ads.items===undefined) ? &lt;&gt;&lt;/&gt; :  ads.items.map(item =&gt; &lt;Ad item={item} key={item.postingId} id={item.postingId}/&gt;) }
  )
  
  
  
  
  
  export async function getServerSideProps(context) {
  const res = await fetch(`www.apiadress.com/${queryString.stringify(context.query)}`)
  const ads = await res.json()
  // console.debug(ads)
  console.debug(queryString.stringify(context.query))
  return {
    props: {ads}, // will be passed to the page component as props
  }
  }
  </code></pre>
  <p>and component Ad receives those props, and renders cards</p>
  <pre><code>const Ad = props =&gt; (
  
      &lt;Card className=&quot;customCard&quot;&gt;
          &lt;Card.Body&gt;
              &lt;Card.Text className=&quot;text&quot;&gt;          
                  &lt;div className=&quot;mainDetails&quot;&gt;
                  &lt;h1 className=&quot;ad_Title&quot;&gt;&lt;Link href=&quot;[ad]&quot; as={props.item.postingId}&gt;{props.item.title}&lt;/Link&gt;&lt;/h1&gt;
                      &lt;p&gt;posted on: {props.item.postingDate.day} / {props.item.postingDate.month}
                      {props.item.postingDate.year}   by {props.item.employer} 
                      &lt;/p&gt;
  
               
                      
                      &lt;div className=&quot;description&quot;&gt;
                          &lt;p&gt;&lt;span&gt;&lt;Cash /&gt;&lt;b&gt; {props.item.rateFrom}- {props.item.rateTo}  per hour &lt;/b&gt;&lt;/span&gt;     &lt;GeoAlt /&gt; &lt;b&gt;{props.item.city}&lt;/b&gt;&lt;/p&gt;
                          &lt;p&gt; &lt;Clock /&gt;  &lt;b&gt;{props.item.jobType}&lt;/b&gt;&lt;/p&gt;  
                      &lt;/div&gt;    
                     
                      &lt;p&gt;{props.item.description.slice(0, 230)}.....&lt;/p&gt;
                     
                  &lt;/div&gt;            
            
  
                  &lt;div&gt;
                      &lt;img src={props.item.employerLogoUrl} alt={props.item.employer} className=&quot;empImg&quot; /&gt;
                      &lt;Button variant=&quot;primary&quot; href=&quot;&quot;&gt; &lt;Heart width=&quot;12&quot; height=&quot;12&quot;/&gt;  SHORLIST  &lt;/Button&gt;
                  &lt;/div&gt;
  
              &lt;/Card.Text&gt;
  
          &lt;/Card.Body&gt;
      &lt;/Card&gt;
  
  
  
  export default Ad;
  </code></pre>
  <p>with NPM run dev - everything works perfectly but at NPM run build I am getting an error</p>
  <blockquote>
  <p>Error occurred prerendering page &quot;/componenets/ad/ad&quot;. Read more:
  <a href="https://err.sh/next.js/prerender-error" rel="nofollow noreferrer">https://err.sh/next.js/prerender-error</a> TypeError: Cannot read property
  'postingId' of undefined</p>
  </blockquote>
  <ol>
  <li>What's causing this? I am assuming that components does not have data before render.</li>
  <li>How to solve this problem?</li>
  </ol>