How to Use NextResponse in Middleware in Next.js

In Next.js middleware, use NextResponse to create and modify HTTP responses such as redirects, rewrites, or setting headers. Import NextResponse from next/server and return it from your middleware function to control the request flow.

Syntax

The NextResponse object is imported from next/server and used inside the middleware function to control the response. You can create a new response, redirect, rewrite, or modify headers.

• NextResponse.next(): Continue the request without changes.
• NextResponse.redirect(url): Redirect the request to a new URL.
• NextResponse.rewrite(url): Rewrite the request URL internally.
• NextResponse.json(data): Return a JSON response.

javascript

import { NextResponse } from 'next/server';

export function middleware(request) {
  // Continue without changes
  return NextResponse.next();

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

  // Rewrite example
  // return NextResponse.rewrite(new URL('/about', request.url));

  // JSON response example
  // return NextResponse.json({ message: 'Hello from middleware' });
}

Example

This example middleware redirects users to the /login page if they are not authenticated. It uses NextResponse.redirect() to send the user to the login page and NextResponse.next() to continue the request if authenticated.

javascript

import { NextResponse } from 'next/server';

export function middleware(request) {
  const isLoggedIn = request.cookies.get('token') !== undefined;

  if (!isLoggedIn) {
    // Redirect to login page
    return NextResponse.redirect(new URL('/login', request.url));
  }

  // Continue to requested page
  return NextResponse.next();
}

Output

When a user without a 'token' cookie visits any page, they are redirected to '/login'. Authenticated users proceed normally.

Common Pitfalls

Common mistakes when using NextResponse in middleware include:

• Not returning a NextResponse object, causing the middleware to hang.
• Using relative URLs instead of absolute URLs with NextResponse.redirect() or NextResponse.rewrite().
• Modifying the request instead of the response, which middleware does not support.
• Forgetting to import NextResponse from next/server.

javascript

import { NextResponse } from 'next/server';

export function middleware(request) {
  // Wrong: returning a string instead of NextResponse
  // return 'redirecting';

  // Wrong: using relative URL in redirect
  // return NextResponse.redirect('/login');

  // Right way:
  return NextResponse.redirect(new URL('/login', request.url));
}

Quick Reference

Method	Description	Usage Example
NextResponse.next()	Continue the request without changes	return NextResponse.next();
NextResponse.redirect(url)	Redirect to a new URL	return NextResponse.redirect(new URL('/login', request.url));
NextResponse.rewrite(url)	Rewrite the request URL internally	return NextResponse.rewrite(new URL('/about', request.url));
NextResponse.json(data)	Return a JSON response	return NextResponse.json({ message: 'Hi' });

Key Takeaways

Always import NextResponse from 'next/server' to use in middleware.

Return a NextResponse object to control request flow like redirects or rewrites.

Use absolute URLs with NextResponse.redirect() and NextResponse.rewrite().

NextResponse.next() lets the request continue without changes.

Common errors include forgetting to return NextResponse or using relative URLs.