如何修复 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 中间件引起的。

Answer 2

这个问题帮助了我：NextJS 预渲染错误 - 在开发中工作正常，在构建中中断。使用 NextAuth.js 时，我必须使用以下代码片段：

const d = useSession();
let data = null;
if (d) data = d.data;

我不知道为什么会这样，但可能与 SWC 有关。