Using NextRequest and NextResponse

Using NextRequest and NextResponse

Next.js provides NextRequest and NextResponse objects, extending the native Web Fetch API Request and Response interfaces with convenient helper methods for cookies, headers, and redirects.

1. NextRequest Capabilities

NextRequest gives you enhanced access to incoming request data:

// app/api/search/route.ts
import { NextRequest, NextResponse } from 'next/server';

export async function GET(request: NextRequest) {
  // 1. Access Query Search Parameters easily
  const searchParams = request.nextUrl.searchParams;
  const query = searchParams.get('q');

  // 2. Read Request Cookies
  const token = request.cookies.get('session_token')?.value;

  // 3. Read HTTP Headers
  const userAgent = request.headers.get('user-agent');

  return NextResponse.json({
    query,
    tokenPresent: Boolean(token),
    userAgent,
  });
}

2. NextResponse Capabilities

NextResponse streamlines crafting HTTP responses:

// app/api/auth/logout/route.ts
import { NextRequest, NextResponse } from 'next/server';

export async function POST(request: NextRequest) {
  // Create a response object
  const response = NextResponse.json(
    { message: 'Logged out successfully' },
    { status: 200 }
  );

  // 1. Mutate Response Cookies
  response.cookies.set('session_token', '', {
    httpOnly: true,
    expires: new Date(0), // Delete cookie
  });

  // 2. Set Custom Response Headers
  response.headers.set('X-Custom-Header', 'App-v1.0');

  return response;
}

Redirecting and Rewriting:

// Redirect user to login
return NextResponse.redirect(new URL('/login', request.url));

// Rewrite request URL internally without changing browser URL bar
return NextResponse.rewrite(new URL('/internal-view', request.url));

NextRequest & NextResponse Helper Method Reference

TL;DR

• NextRequest provides nextUrl, cookies, and headers utilities.
• Access search parameters via request.nextUrl.searchParams.get('key').
• Set or clear cookies on responses using response.cookies.set().
• Use NextResponse.redirect() to perform HTTP redirects.