Middlewares in Next.js

Middleware in Next.js allows you to intercept requests before they reach a route or page. It is commonly used for authentication, authorization, redirects, request modification, and other custom logic.

• Middleware functions are executed before the request reaches the final route handler.
• They can be used to intercept and modify requests and responses.
• Middleware is defined in the middleware.js file at the root of your project.
• It allows you to write custom logic for tasks like authentication, rate limiting, and more.
• Middleware runs on the Edge Runtime, ensuring low latency and high performance.

Core Concepts of Next.js Middleware

The following concepts explain how Middleware works in Next.js and how it can be configured to handle incoming requests effectively.

1. Convention

In Next.js, you can implement Middleware is created in a middleware.js (or middleware.ts) file at the project root. If your project uses a src directory, place the file inside the src folder (src/middleware.js).

Middleware is created in middleware.js (or middleware.ts) at the project root. If your project uses a src directory, place it in src/middleware.js.

import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'
 
// This function can be marked `async` if using `await` inside
export function middleware(request: NextRequest) {
  return NextResponse.redirect(new URL('/home', request.url))
}
 
// See "Matching Paths" below to learn more
export const config = {
  matcher: '/about/:path*',
}

2. Matching Paths

The middleware file will be invoked for every route in your project, If you want to apply to any specific route then you have to mention a route matcher inside middleware.js file.

route matcher (specific path):

// Main Middleware Function

export const config = {
  matcher: '/profile/:path*',
} 

route matcher (multiple path):

// Main Middleware Function
export const config = {
  matcher: [ '/profile/:path*',  '/about/:path*' ]
} 

Syntax:

import { NextResponse } from 'next/server'
 
export function middleware(request) {
  return NextResponse.redirect(new URL('/home', request.url))
}
 
//Matching Path
export const config = {
  matcher: '/about/:path*',
}

3. NextResponse

The NextResponse API empowers you to:

• Redirect incoming requests to an alternate URL.
• Revise responses by showcasing a specified URL.
• Configure request headers for API Routes, getServerSideProps, and rewrite destinations.
• Implement response cookies.
• Define response headers.

For generating a response from Middleware, you can:

• Rearrange to a route (Page or Route Handler) responsible for generating a response.
• Directly yield a NextResponse. Refer to the section on Producing a Response.

4. Using Cookies

Cookies function as standard headers. During a request, they reside in the Cookie header, while in a response, they are located within the Set-Cookie header. Next.js simplifies cookie management with its cookies extension on NextRequest and NextResponse.

For incoming requests, cookies offer the following methods: get, getAll, set, and delete, enabling you to retrieve, manipulate, and remove cookies. You can verify the presence of a cookie with has or clear all cookies with remove.

For outgoing responses, cookies provide methods such as get, getAll, set, and delete, facilitating the handling and modification of cookies before sending the response.

import { NextResponse } from 'next/server';

export function middleware(request) {
  // Assume a "Cookie:nextjs=fast" header to be present on the incoming request
  // Getting cookies from the request using the `RequestCookies` API
  let cookie = request.cookies.get('nextjs');
  console.log(cookie); // => { name: 'nextjs', value: 'fast', Path: '/' }
  const allCookies = request.cookies.getAll();
  console.log(allCookies); // => [{ name: 'nextjs', value: 'fast' }]
 
  request.cookies.has('nextjs'); // => true
  request.cookies.delete('nextjs');
  request.cookies.has('nextjs'); // => false
 
  // Setting cookies on the response using the `ResponseCookies` API
  const response = NextResponse.next();
  response.cookies.set('vercel', 'fast');
  response.cookies.set({
    name: 'vercel',
    value: 'fast',
    path: '/',
  });
  cookie = response.cookies.get('vercel');
  console.log(cookie); // => { name: 'vercel', value: 'fast', Path: '/' }
  // The outgoing response will have a `Set-Cookie:vercel=fast;path=/` header.
 
  return response;
}

5. Setting Headers

Indeed, with the Next Response API, you can effectively manage both request and response headers. This capability has been available since Next.js version 13.0.0.

import { NextResponse } from 'next/server';

export function middleware(request