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*', // すべてのパスでミドルウェアを実行
};

主な違いのまとめ

まとめ

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

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

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