NextJS 13 Beta部署Vercel遇Failed fetch及ENOTFOUND错误求助

问题分析 #

你遇到的Failed fetch和ENOTFOUND错误，核心原因是NextJS 13服务器组件中调用内部API的方式有误。在NextJS 13的App Router模式下，服务器组件运行在服务端，通过HTTP请求调用内部API不仅冗余，还会因环境变量或URL解析问题导致部署失败——本地dev环境能正常运行，是因为dev服务器自动处理了URL上下文，但Vercel部署时没有这个本地环境支撑。

另外你代码里还有个细节问题：response.json()是异步操作，未添加await会返回Promise对象，而非实际数据，这也会引发组件渲染异常。

解决方案 #

方案1：直接调用业务逻辑（推荐） #

服务器组件可直接导入API中的数据库查询逻辑，跳过HTTP请求，既提升效率又规避URL问题：

1. 将API中的查询逻辑抽离为独立函数（比如新建lib/venues.ts文件）：

import prisma from '../prisma/client'

export async function getAllVenues() {
  try {
    return await prisma.venue.findMany()
  } catch (err) {
    throw new Error('获取场地失败')
  }
}

2. 在页面组件中直接调用该函数：

import { getAllVenues } from '@/lib/venues'

export default async function Home() {
  const venues = await getAllVenues()
  
  return (
   <main>
      <section className='p-5'>
        <Venues venues={venues} />
      </section>
   </main>
  )
}

方案2：修正Fetch调用方式（若坚持用HTTP请求） #

如果一定要用fetch调用内部API，服务器组件内无需完整URL，直接使用相对路径即可——NextJS会在服务端直接路由到API处理函数，无需走外部网络请求：

const allVenues = async () => {
  const response = await fetch('/api/venues/getAllVenues')
  // 务必添加await解析JSON
  const listings = await response.json()
  return listings
}

export default async function Home() {
  const venues = await allVenues()
  
  return (
   <main>
      <section className='p-5'>
        <Venues venues={venues} />
      </section>
   </main>
  )
}

额外注意事项 #

• 服务器组件调用内部API完全不需要NEXT_PUBLIC_BASE_URL变量，服务端运行时无需域名即可直接访问API逻辑。
• 确保Vercel上配置了正确的数据库环境变量（比如Prisma所需的数据库连接字符串），否则即使fetch正常，数据库查询仍会失败。
• 检查NextJS 13路由结构：若使用App Router，API路由可继续放在pages/api目录（NextJS 13仍兼容该模式），或迁移至App目录下的Route Handler（逻辑类似）。

内容的提问来源于stack exchange，提问作者SeanMarc