NextResponseと一般的なJavaScriptのResponseの違い

Web開発において、HTTPレスポンスの生成は非常に重要な要素です。

一般的なJavaScriptの実行環境、特にブラウザやNode.jsのランタイムにおいては、Fetch APIやNode.jsのHTTPモジュールなどで標準的なResponseオブジェクトを扱います。一方、Next.jsのAPIルートやミドルウェアでは、NextResponseという独自のクラスが提供されています。これらはどちらもHTTPレスポンスを表現するものですが、その目的、機能、そして使用されるコンテキストに明確な違いがあります。

本記事では、NextResponseとJSのResponseの違いについて解説しています。

一般的なJavaScriptのResponseオブジェクト

まず、一般的なJavaScript環境におけるResponseオブジェクトについて説明します。

これは主にFetch APIの一部としてブラウザやモダンなNode.js環境で利用される標準的なWeb APIです。

例 (Node.jsでのサーバー構築の例)

// Node.jsでFetch APIライクなResponseを返す
// これは一般的なWebサーバーフレームワークとは異なる低レベルな例であることに注意

import { createServer } from 'http';

const server = createServer(async (req, res) => {
  if (req.url === '/data') {
    const data = { message: 'Hello from Node.js!' };
    const responseBody = JSON.stringify(data);

    res.writeHead(200, {
      'Content-Type': 'application/json',
      'Content-Length': Buffer.byteLength(responseBody)
    });
    res.end(responseBody);
  } else {
    res.writeHead(404, { 'Content-Type': 'text/plain' });
    res.end('Not Found');
  }
});

server.listen(3000, () => {
  console.log('Server listening on port 3000');
});

Next.jsのNextResponse

NextResponseは、Next.jsのAPIルート (pages/api/* または App Routerのroute.ts) やミドルウェアといったNext.js固有のサーバーサイド実行環境のために提供される、Responseオブジェクトを拡張したクラスです。

例 (Next.js APIルート)

以下は、APIルートを用いてJSONレスポンスを生成するコードです。

import { NextResponse } from 'next/server';

export async function GET(request: Request) {
  const data = { message: 'Hello from Next.js API route!', timestamp: new Date().toISOString() };

  // NextResponse.json() を使用して簡単にJSONレスポンスを生成
  return NextResponse.json(data, { status: 200 });
}

例 (Next.js ミドルウェア）

// middleware.ts
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export function middleware(request: NextRequest) {
  // ユーザーが認証されているか確認するなどのロジック
  const isAuthenticated = request.cookies.get('auth_token');

  if (!isAuthenticated && request.nextUrl.pathname.startsWith('/dashboard')) {
    // 認証されていないユーザーをログインページにリダイレクト
    return NextResponse.redirect(new URL('/login', request.url));
  }

  return NextResponse.next();
}

export const config = {
  matcher: '/:path*', // すべてのパスでミドルウェアを実行
};

主な違いのまとめ

特徴	一般的なResponseオブジェクト	Next.jsのNextResponse
提供元	Web標準 (Fetch API), Node.jsのWeb API互換レイヤー	Next.jsフレームワーク
目的	HTTPレスポンスの汎用的な表現、主にクライアントサイドでのリクエスト結果の処理	Next.js APIルート、ミドルウェアでのレスポンス生成とNext.js機能との連携
主要な使用場所	ブラウザのFetch API、Node.jsのHTTPモジュールやカスタムWebサーバー	Next.js APIルート、Next.jsミドルウェア
機能拡張	基本的なHTTPプロパティとボディ解析メソッドを提供	Responseの機能を継承し、Next.js固有の便利なメソッド (json, redirect, rewrite, nextなど) やプロパティ (cookies) を追加
セキュリティ	直接的なセキュリティ機能はなし（利用側の実装に依存）	リダイレクトや書き換えを通じて、ルーティングレベルでのセキュリティ・アクセス制御に利用可能

まとめ

一般的なJavaScriptのResponseオブジェクトは、HTTP通信におけるレスポンスの基盤となる汎用的なインターフェースです。

対して、Next.jsのNextResponseは、そのResponseオブジェクトを継承しつつ、Next.js特有の強力な機能（ルーティング、ミドルウェア、APIルートなど）と密接に連携できるように拡張された、Next.jsアプリケーションに特化したレスポンスクラスであると言えます。

Next.jsでAPIルートやミドルウェアを開発する際には、NextResponseを使用することで、より少ないコードで安全かつ効率的にレスポンスを生成し、Next.jsの持つルーティング機能を最大限に活用できます。