title: how to fix nextjs prerender error - vercel deployment?
body: <p>How do I troubleshoot this problem this deployment issue? I am following this tutorial. My node_modules and .next are ignored and not pushed to github. It works locally but can't seem to deploy. I have supplied both the component code as well as the page it's exported on. Let me know if you can see what I am missing.</p>
  <p><a href="https://www.youtube.com/watch?v=V4SVNleMitE" rel="nofollow noreferrer">https://www.youtube.com/watch?v=V4SVNleMitE</a></p>
  <p>deployment errors</p>
  <pre><code>Error occurred prerendering page &quot;/components/BlogPosts&quot;. Read more: https://nextjs.org/docs/messages/prerender-error
  TypeError: Cannot read property 'fields' of undefined
      at BlogPosts (/vercel/path0/.next/server/chunks/130.js:39:12)
      at d (/vercel/path0/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:33:498)
      at bb (/vercel/path0/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:36:16)
      at a.b.render (/vercel/path0/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:42:43)
      at a.b.read (/vercel/path0/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:41:83)
      at Object.exports.renderToString (/vercel/path0/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:52:138)
      at Object.renderPage (/vercel/path0/node_modules/next/dist/server/render.js:673:46)
      at Object.defaultGetInitialProps (/vercel/path0/node_modules/next/dist/server/render.js:315:51)
      at Function.getInitialProps (/vercel/path0/.next/server/pages/_document.js:645:16)
      at Object.loadGetInitialProps (/vercel/path0/node_modules/next/dist/shared/lib/utils.js:69:29)
  </code></pre>
  <hr />
  <p>component blog posts</p>
  <pre><code>export default function BlogPosts({post }) {
     
     const {title, information,slug , thumbnail} = post.fields
     
      return (
          &lt;div&gt;
          
        
              &lt;div className='container w-50 h-25 mt-4'&gt;
                  &lt;Image
                      className='nav' 
                      src={'https:' + thumbnail.fields.file.url}
                      width={thumbnail.fields.file.details.image.width}
                      height={thumbnail.fields.file.details.image.height}
                  /&gt;
              &lt;/div&gt;
              &lt;div&gt;
                  &lt;div&gt;
                      &lt;h4 className=''&gt;{title}&lt;/h4&gt;
                      &lt;Link href={'/contentslug/' + slug}&gt;
                          &lt;a className='btn btn-primary text-white'&gt;Read more&lt;/a&gt;
                      &lt;/Link&gt;
                  &lt;/div&gt;
              
              &lt;/div&gt;
          &lt;/div&gt;
      )
  }
   
  </code></pre>
  <p>Pages/Posts</p>
  <pre><code>import {createClient} from 'contentful'
  import BlogPosts from './components/BlogPosts'
  import Nav from './components/Nav'
  import Logo from './components/Logo'
  
  
  export async function getStaticProps() {
  
    const client = createClient({
      space: process.env.NEXT_PUBLIC_CONTENTFUL_ID,
      accessToken: process.env.NEXT_PUBLIC_CONTENTFUL_TOKEN,
    })
  
  const res = await client.getEntries({content_type: 'posts'})
  
  return {
    props: {
      posts: res.items ,
      revalidate: 1
    }
  }
  
  
  }
  
  
  
  export default function Home({posts}) {
   console.log(posts);
    
    return (
      
      &lt;div&gt;
       &lt;Logo/&gt; 
      &lt;Nav/&gt;
      &lt;div className=&quot;container text-center display-5&quot;&gt;
     {posts.map(post =&gt; (
      &lt;BlogPosts key={post.sys.id} post={post}/&gt;
             
     ))}
  
  &lt;/div&gt;
      &lt;/div&gt;
    )
  }
  </code></pre>