部署Next.js 14应用至Vercel时遭遇JSON输入意外结束错误

部署到Vercel后出现SyntaxError: Unexpected end of JSON input且伴随预渲染错误，核心原因是：

• 预渲染阶段（静态生成），使用NEXT_PUBLIC_FRONTEND_URL的完整URL调用API时，Vercel的静态生成环境无法访问到尚未完全部署的API路由，导致请求返回空响应，解析JSON失败。
• 开发环境中Next.js同时运行前端与服务端，完整URL可以正常访问API，因此无报错。

方案1：使用相对路径调用内部API（推荐） #

在服务器组件中调用内部API路由时，无需使用完整外部URL，直接用相对路径即可。Next.js会直接执行路由处理器的代码，跳过网络请求，避免预渲染时的访问问题。

修改app/page.js的fetch代码：

//app/page.js
export default async function Home() {
  const response = await fetch(
    '/api/test', // 替换为相对路径
    {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ data: 'test string' }),
      next: { revalidate: 24 },
    }
  )

  // 增加响应状态检查，避免失败时解析JSON报错
  if (!response.ok) {
    throw new Error(`API请求失败，状态码：${response.status}`)
  }

  const test = await response.json()
  console.log('TEST Request >> ', test)
  // ...
}

同时清理路由处理器的多余参数（不影响功能，但更规范）：

//app/api/test/route.js
import { NextResponse } from 'next/server'

export async function POST(request) { // 移除多余的response参数
  const data = await request.json()
  return NextResponse.json(
    { data },
    { status: 200 }
  )
}

方案2：强制动态渲染（备选） #

如果必须使用外部URL调用API，可以通过禁用静态预渲染，让页面每次请求都在服务器动态执行，此时API已部署完成，可正常访问。

在app/page.js顶部添加动态渲染配置：

//app/page.js
export const dynamic = 'force-dynamic'

export default async function Home() {
  // 原fetch代码保持不变
}

这种方式会牺牲静态生成的性能优势，仅在无法使用方案1时考虑。

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