Next.js 13 API响应添加自定义Header报错求助

问题原因 #

你遇到的response.setHeader is not a function错误，核心原因是Next.js 13的App Router（app目录下的API路由）和旧版Pages Router（pages/api目录）的响应处理逻辑完全不同：

• 旧版Pages Router的API函数接收NextApiRequest和NextApiResponse两个参数，通过response.setHeader设置响应头；
• 而App Router的API函数仅接收Request参数，需要通过返回Response对象的方式自定义响应头。

解决方案 #

情况1：使用App Router（app/api目录下的路由） #

直接通过new Response()的第二个配置参数设置headers，示例代码：

export const GET = async (request: Request) => {
  try {
    // 执行你的业务逻辑，比如获取数据
    const responseContent = "示例响应内容";

    // 返回带自定义Header的Response对象
    return new Response(responseContent, {
      headers: {
        'Content-Disposition': 'attachment; filename="demo.txt"',
        'Content-Type': 'text/plain; charset=utf-8',
        // 可添加更多自定义Header
        'X-Custom-Header': 'your-custom-value'
      },
    });
  } catch (error) {
    return new Response(JSON.stringify({ message: "请求出错" }), {
      status: 500,
      headers: {
        'Content-Type': 'application/json'
      }
    });
  }
};

情况2：继续使用Pages Router（pages/api目录下的路由） #

如果想保留旧版写法，确保API文件放在pages/api目录下，此时原代码的setHeader写法依然有效，注意类型导入正确：

import type { NextApiRequest, NextApiResponse } from 'next';

export const GET = async (request: NextApiRequest, response: NextApiResponse) => {
  try {
    // 业务逻辑
    response.setHeader('Content-Disposition', 'attachment; filename="demo.txt"');
    response.setHeader('Content-Type', 'text/plain');
    
    response.status(200).send("示例响应内容");
  } catch (error) {
    response.status(500).json({ message: "请求出错" });
  }
};

关键提醒 #

• 若API文件在app/api目录下，不要使用NextApiRequest和NextApiResponse类型，这是Pages Router专属的；
• App Router中，所有响应都需要通过返回Response对象来处理，包括状态码、响应头和响应体。

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