Next.js 13部署后与本地客户端请求响应不一致问题求助

1. 确认API路由文件结构与命名规范 #

Next.js 13 app目录下的API路由必须遵循严格的结构：

• 路由文件必须命名为route.ts（或.js）
• 路径需为app/api/posts/route.ts（对应/api/posts接口）

如果文件命名错误（比如沿用pages/api时代的index.ts）或路径层级不对，Vercel会将其识别为页面路由，返回默认HTML页面而非API响应。

2. 修复API路由函数的参数与返回值错误 #

你的API路由代码混用了pages/api和app/api的写法，这是核心问题：

• app目录的API路由函数不需要接收NextApiResponse参数，仅需Request
• catch块中缺少return语句，导致函数无响应返回，Next.js会默认返回页面HTML

修正后的API路由代码：

import { NextResponse } from 'next/server';
import prisma from '@/lib/prisma'; // 替换为你的prisma实例路径

export async function GET(request: Request) {
  try {
    const posts = await prisma.post.findMany();
    return NextResponse.json(posts, {
      status: 200,
      headers: {
        'Content-Type': 'application/json',
      },
    });
  } catch (error) {
    console.error('request error', error);
    // 必须return响应，否则会触发页面路由逻辑
    return NextResponse.json({ error: 'error getting posts' }, { status: 500 });
  }
}

3. 简化API请求路径，避免环境变量问题 #

服务端组件中请求API路由时，直接使用相对路径即可，无需依赖process.env.NEXT_PUBLIC_URL，避免因环境变量值错误（比如多了斜杠）导致的URL重定向：

修正后的请求代码：

const response = await fetch('/api/posts', {
  method: "GET",
  headers: {
    Accept: "application/json",
    "Content-Type": "application/json",
  },
});

4. 排查Vercel部署日志与数据库连接 #

部署后返回HTML也可能是API路由执行出错导致：

• 查看Vercel部署日志，确认prisma数据库连接是否正常（比如生产环境数据库权限、连接字符串配置）
• 检查是否有未捕获的错误导致函数无响应返回

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