如何修复 nextjs 预渲染错误 - vercel 部署？

Question

如何解决这个部署问题？我正在关注本教程。我的 node_modules 和 .next 被忽略并且没有推送到 github。它在本地工作，但似乎无法部署。我已经提供了组件代码以及它导出的页面。如果你能看到我遗漏的东西，请告诉我。

https://www.youtube.com/watch?v=V4SVNleMitE

部署错误

Error occurred prerendering page "/components/BlogPosts". 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)

---

组件博客文章

export default function BlogPosts({post }) {
   
   const {title, information,slug , thumbnail} = post.fields
   
    return (
        <div>
        
      
            <div className='container w-50 h-25 mt-4'>
                <Image
                    className='nav' 
                    src={'https:' + thumbnail.fields.file.url}
                    width={thumbnail.fields.file.details.image.width}
                    height={thumbnail.fields.file.details.image.height}
                />
            </div>
            <div>
                <div>
                    <h4 className=''>{title}</h4>
                    <Link href={'/contentslug/' + slug}>
                        <a className='btn btn-primary text-white'>Read more</a>
                    </Link>
                </div>
            
            </div>
        </div>
    )
}
 

页面/帖子

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 (
    
    <div>
     <Logo/> 
    <Nav/>
    <div className="container text-center display-5">
   {posts.map(post => (
    <BlogPosts key={post.sys.id} post={post}/>
           
   ))}

</div>
    </div>
  )
}

Answer 1

您拥有fields 或undefined。如果您 100% 确定您的代码可以正常工作，这可能是由于一些奇怪的部署行为造成的。

如何解决（可能）：

1. 在本地构建您的项目。如果可行，请执行下一步
2. 在导出组件内的BlogPosts 中注释您的代码。代码必须有效，因此您导出的组件将是 empty 但 working。
3. 将此代码推送到 Vercel。
4. 取消提交您的代码。 （在第 2 点完成）
5. 再推一次。

附： API 的这种行为有时是由于您重新设计的 API 中间件造成的。