Next.js 中的 Response 和 NextResponse 不要搞混了

介绍

在 Next.js 中，Response 是用于处理 HTTP 响应的对象。它通常用于 API 路由（app/api 或 pages/api）中，用于返回数据、状态码或错误信息。Next.js 的 Response 对象与 Web 标准的 Response 对象兼容，所以我们可以使用标准的 Web API 方法来构建响应。 Next.js 提供了 NextResponse 工具类，用于更方便地构建响应。它是对标准 Response 的扩展，支持更多功能。

基本用法

在 Next.js 的 API 路由中，我们可以直接返回一个 Response 对象。以下是一个简单的示例：

// 返回 JSON 数据
// app/api/hello/route.js (或 pages/api/hello.js)
import { NextResponse } from 'next/server';

export async function GET() {
  const data = { message: 'Hello, World!' };
  return NextResponse.json(data);
}

// 返回状态码
import { NextResponse } from 'next/server';

export async function GET() {
  return NextResponse.json({ error: 'Not Found' }, { status: 404 });
}

NextResponse 工具类

常用方法

• NextResponse.json(data, options)：

  • 返回 JSON 格式的响应
  • data：要返回的数据。
  • options：可选配置，如 status（状态码）、headers（响应头）等。

• NextResponse.redirect(url, status)：

  • 重定向到指定的 URL。
  • url：目标 URL。
  • status：重定向状态码（默认 307）。

• NextResponse.rewrite(url)：重写请求到指定的 URL（客户端 URL 不变）。

• NextResponse.next()：继续处理下一个中间件或路由。

标准 Response 对象

如果你不想使用 NextResponse，也可以直接使用标准的 Response 对象。

// app/api/hello/route.js (或 pages/api/hello.js)
// 返回 JSON 数据
export async function GET() {
  const data = { message: 'Hello, World!' };
  return new Response(JSON.stringify(data), {
    headers: { 'Content-Type': 'application/json' },
  });
}

// 返回纯文本
export async function GET() {
  return new Response('Hello, World!', {
    headers: { 'Content-Type': 'text/plain' },
  });
}

设置响应头

你可以通过 headers 选项设置自定义响应头。

import { NextResponse } from 'next/server';

export async function GET() {
  const data = { message: 'Hello, World!' };
  return NextResponse.json(data, {
    headers: { 'Custom-Header': 'value' },
  });
}

处理错误

在 API 路由中，你可以返回错误响应。

import { NextResponse } from 'next/server';

export async function GET() {
  try {
    const data = await fetchData(); // 假设这是一个异步操作
    return NextResponse.json(data);
  } catch (error) {
    return NextResponse.json(
      { error: 'Internal Server Error' },
      { status: 500 }
    );
  }
}

总结

• NextResponse：Next.js 提供的工具类，用于更方便地构建响应。
• Response：标准的 Web API 对象，兼容 Next.js。
• 常见用途：返回 JSON 数据、设置状态码、重定向、处理错误等。