Next.js项目构建失败求助：Vercel部署预渲染报错

我用Next.js开发博客网站，计划部署到Vercel。本地执行npm run dev时一切正常，但执行npm run build时出现构建错误：预渲染页面/时失败，报错信息显示fetch请求被拒绝（ECONNREFUSED），且无法解构allBlogs（值为undefined）。项目采用MongoDB+Mongoose实现CRUD，通过fetch调用API，怀疑问题出在BlogList.jsx组件，求解决。

错误日志 #

- info Loaded env from E:\Programming\Web Dev\Personal Websites\blogposts\.env
- info Creating an optimized production build  
- info Compiled successfully
- info Linting and checking validity of types  
- info Collecting page data
[=   ] - info Generating static pages (5/7)TypeError: fetch failed
    at Object.fetch (node:internal/deps/undici/undici:11600:11)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
  cause: AggregateError
      at internalConnectMultiple (node:net:1114:18)
      at afterConnectMultiple (node:net:1667:5)
      at TCPConnectWrap.callbackTrampoline (node:internal/async_hooks:130:17) {    
    code: 'ECONNREFUSED',
    [errors]: [ [Error], [Error] ]
  }
}
TypeError: Cannot destructure property 'allBlogs' of '(intermediate value)' as it is undefined.     
    at BlogList (E:\Programming\Web Dev\Personal Websites\blogposts\.next\server\app\page.js:450:13)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

Error occurred prerendering page "/". Read more: Next.js 预渲染错误文档   
TypeError: Cannot destructure property 'allBlogs' of '(intermediate value)' as it is undefined.     
    at BlogList (E:\Programming\Web Dev\Personal Websites\blogposts\.next\server\app\page.js:450:13)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
- info Generating static pages (7/7)

> Export encountered errors on following paths:
        /page: /

BlogList.jsx 代码 #

import React from 'react';
import RemoveBtn from './RemoveBtn';
import Link from 'next/link';
import {AiFillEdit} from 'react-icons/ai';

const getBlogs = async() => {
  try {
    const res = await fetch("http://localhost:3000/api/blogs", {
      cache: 'no-store'
    })

    if (!res.ok) {
      throw new Error("Failed to fetch blog posts");
    }
    return res.json();
  } catch (error) {
    console.log(error)
  }

}

async function  BlogList() {

  const {allBlogs} = await getBlogs();

  return (
    <>
    {allBlogs.map((blog) => (
      <div className="flex justify-between rounded-xl p-3 sm:max-3xl:p-4 w-fit  bg-red-200 text-black shadow-lg shadow-red-300 my-3 border border-red-200 hover:border hover:border-white ">
        <div className="text-sm sm:max-3xl:text-lg">
          <h2 className="text-xl sm:max-3xl:text-2xl sm:max-3xl:mb-3 font-semibold mb-2">{blog.title}</h2>
          <div className="my-2 sm:max-3xl:my-3">
              {blog.body}
          </div>
          <div className="text-base sm:max-3xl:text-lg">
              {blog.author}
          </div>
          <i className=" text-xs font-semibold sm:max-3xl:text-sm text-gray-600">
              {blog.updatedAt} 
          </i>
        </div>
        <div className="flex flex-col-reverse justify-between items-end text-base sm:max-3xl:text-xl sm:max-3xl:ml-3 ml-1 py-1">
          <RemoveBtn id={blog._id} />
          <Link href={`/editBlog/${blog._id}`}>
              <AiFillEdit />
          </Link>
        </div>
      </div>
      ))}
    </>
  )
}

export default BlogList;

内容的提问来源于stack exchange，提问作者Gaurav Abhiman Mahajan