Next.js API路由报错：TypeError: response.status is not a function

问题背景 #

编写Next.js API路由通过Prisma连接MongoDB获取电影数据，数据库查询正常（console.log(movies)能输出正确电影列表），但返回响应时抛出Internal Server Error: TypeError: response.status is not a function，前端无法接收数据。

错误原因 #

Next.js App Router的API路由参数结构与Express框架完全不同：

• 错误使用了Express风格的(req, response, next)参数，而Next.js App Router的GET函数仅接收单个request对象，第二个参数response实际为undefined，因此调用response.status()会触发类型错误。
• Next.js API路由需通过NextResponse对象（或原生Response）返回响应，而非Express的res方法。

修复后的API路由代码 #

import { PrismaClient } from '@prisma/client';
import { NextResponse } from 'next/server';

// 全局单例Prisma实例（避免开发环境热重载重复创建连接）
const prisma = global.prisma || new PrismaClient();
if (process.env.NODE_ENV !== 'production') global.prisma = prisma;

export const GET = async (request) => {
  try {
    console.log('Connected to Database via Prisma');
    const movies = await prisma.movies.findMany();
    console.log('Fetched movies:', movies);
    // 使用NextResponse返回JSON响应
    return NextResponse.json(movies, { status: 200 });
  } catch (error) {
    console.error('Internal Server Error:', error);
    return NextResponse.json({ error: 'Internal Server Error' }, { status: 500 });
  } finally {
    // 非生产环境可保留断开逻辑，生产环境建议复用连接
    if (process.env.NODE_ENV !== 'production') {
      await prisma.$disconnect().catch((disconnectError) => {
        console.error('Failed to disconnect:', disconnectError);
      });
    }
  }
};

关键修复点 #

• 参数修正：将GET函数参数改为仅接收request对象，移除错误的response和next参数。
• 响应方式：使用NextResponse.json()返回响应，替代Express风格的response.status().json()。
• Prisma实例优化：使用全局单例创建PrismaClient，避免开发环境热重载时重复创建连接导致的资源泄漏。

前端组件说明 #

提供的前端React组件代码无问题，修复API路由后即可正常获取数据并渲染。

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