Next.js - NextResponse

---

---

The NextResponse

The Next.js NextResponse class extends the native Web Response API to provide additional functionality and methods to handle HTTP responses in Next.js applications.

Syntax

Following is the syntax of NextResponse class:

class NextResponse extends Response {
  constructor(body?: BodyInit | null, init?: ResponseInit)
}

Parameters

The NextRequest class takes two parameters:

• body (optional): The response body
• init (optional): An object containing custom configurations

Return Value

The NextResponse method will return a new NextResponse instance with the following additional methods:

• json(): Returns a JSON response
• html(): Returns an HTML response
• text(): Returns a text response
• redirect(): Redirects the request to a new URL
• status(): Sets the status code of the response
• headers(): Sets the headers of the response

Key Points

• NextResponse API is only available in Edge Runtime
• It Provides enhanced functionality over standard Response object
• The NextResponse class is not available in API Routes (pages/api), only in App Router

Example 1

In the code below, we demonstrate how to use the NextResponse class to return a JSON response in a Next.js application.

// app/api/hello/route.ts

import { NextRequest, NextResponse } from 'next/server'

export async function GET(request: NextRequest) {
    return NextResponse.json({
        message: 'Hello, World!'
    })
}

Output

Example 2

In the code below, we demonstrate how to use the NextResponse class to redirect a request to a new URL in a Next.js application.

// app/api/hello/route.ts

import { NextResponse } from 'next/server'
import { type NextRequest } from 'next/server'
 
export async function GET(request: NextRequest) {
	// Given an incoming request...
	const loginUrl = new URL('/login', request.url)
	// Add ?from=/incoming-url to the /login URL
	loginUrl.searchParams.set('from', request.nextUrl.pathname)
	// And redirect to the new URL
	return NextResponse.redirect(loginUrl)
}

Output