如何在Next.js的JSON响应中添加请求头？

你可以通过两种方式实现这个需求：

方法一：先创建JSON响应对象，再添加请求头 #

直接用NextResponse.json()生成JSON响应对象，之后调用headers.set()方法添加自定义请求头：

import { NextResponse } from 'next/server';

export const GET = async () => {
  const response = NextResponse.json({ status: 'OK' });
  response.headers.set('X-Robots-Tag', 'noindex');
  // 可添加更多请求头
  // response.headers.set('Another-Header', 'value');
  return response;
};

方法二：调用NextResponse.json()时直接配置请求头 #

在生成JSON响应的同时，通过第二个参数传入headers配置项，一次性完成响应内容和请求头的设置：

import { NextResponse } from 'next/server';

export const GET = async () => {
  return NextResponse.json(
    { status: 'OK' },
    {
      headers: {
        'X-Robots-Tag': 'noindex',
        'Content-Type': 'application/json' // 可选，默认已设置
      }
    }
  );
};

注意：NextResponse.next()是用于继续路由匹配流程的响应对象，它本身不支持.json()方法，所以你之前尝试的response.json({})会报错，正确的做法是使用NextResponse.json()来生成JSON格式的响应。

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