Middlewares in Next.js

Middlewares in Next.js provide a powerful mechanism to execute custom code before a request is completed. They enable you to perform tasks such as authentication, logging, and request manipulation, enhancing the functionality and security of your application.

Middleware in Next.js

Middleware is a mechanism that is used to perform tasks before rendering a page. It allows you to intercept requests before they reach the page component. It enables you to perform operations like authentication, authorization, data fetching, and modifying the request or response objects.

In Next.js, 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.

Convention

In Next.js, you can implement middleware by creating middleware.js (or .ts) file in a project root directory(you have to create a middleware.js file inside src folder.).

You can only create a one middleware.js (or .ts) file per project, but you can still divide it's logic in a different modules.

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*',
}

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*',
}

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.

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;
}

Setting Headers

Indeed, with the NextResponse 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) {
  // Clone the request headers and set a new header `x-hello-from-middleware1`
  const requestHeaders = new Headers(request.headers);
  requestHeaders.set('x-hello-from-middleware1', 'hello');
 
  // You can also set request headers in NextResponse.rewrite
  const response = NextResponse.next({
    request: {
      // New request headers
      headers: requestHeaders,
    },
  });
 
  // Set a new response header `x-hello-from-middleware2`
  response.headers.set('x-hello-from-middleware2', 'hello');
  return response;
}

CORS

This middleware function adds CORS headers to the response to allow requests from any origin, methods, and headers. For preflighted requests (OPTIONS method), it responds immediately with appropriate headers and a status code of 200.

import { NextResponse } from 'next/server';

export function middleware(request) {
  // Set CORS headers to allow requests from any origin
  const response = NextResponse.next();
  response.headers.set('Access-Control-Allow-Origin', '*');
  response.headers.set('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');
  response.headers.set('Access-Control-Allow-Headers', 'Content-Type, Authorization');
  
  // For preflighted requests, respond immediately with appropriate headers
  if (request.method === 'OPTIONS') {
    response.status = 200;
    return response;
  }

  // Continue processing other requests
  return response;
}

Producing Response

Directly responding from Middleware is supported by returning either a Response or NextResponse instance. This functionality has been available since Next.js version 13.1.0.

import { isAuthenticated } from '@lib/auth';

// Limit the middleware to paths starting with `/api/`
export const config = {
  matcher: '/api/:function*',
};

export function middleware(request) {
  // Call our authentication function to check the request
  if (!isAuthenticated(request)) {
    // Respond with JSON indicating an error message
    return new Response(
      JSON.stringify({ success: false, message: 'authentication failed' }),
      { status: 401, headers: { 'Content-Type': 'application/json' } }
    );
  }
}

Steps to Setup a NextJS App

Step 1: Create a NextJS application using the following command and answer some few questions.

npx create-next-app@latest app_name

Step 2: After creating your project folder, move to it using the following command.

cd app_name

Project Structure:

Example

The below example demonstrate the use of middleware in next.js.

Note: Remove included CSS file from layout.js.

In this example, we have created a form which will take username and password from the user, When a user submits the form middleware.js file will match the input with the already defined username and password. If it matches then, it procced next and request will be sent to the server(route.js) and it will display Welcome message else it will directly response a Invalid Username & Password message.

//File path: src/app/page.js

export default function Home() {
    return (
        <>
            <h1>Login Page</h1>
            <form method="post" action="/submit">
                <label>Username</label>
                <input type="text"
                    placeholder="Enter Username"
                    name="username" required />
                <br />
                <label>Password</label>
                <input type="password"
                    placeholder="Enter Password"
                    name="password" required />
                <br />
                <button type="submit">Submit</button>
            </form>
        </>
    );
}

//File path: src/app/[submit]/route.js

import { NextResponse } from "next/server";

//Handling POST request
export async function POST(req, res) {

    //Response 
    return new NextResponse(`<h1>Welcome</h1>`,
        {
            status: 200,
            headers: { 'content-type': 'text/html' }
        }
    );
}

//File path: src/middleware.js

import { NextResponse } from "next/server"

export async function middleware(req) {
    //Get the Form Data
    const Formdata = await req.formData();
    let username = Formdata.get('username');
    let password = Formdata.get('password');

    if (username == "gfg" & password == "123") {
        return NextResponse.next()
    } else {
        return new NextResponse(
            `<h1>Invalid Username & Password</h1>`,
            {
                status: 401,
                headers: { 'content-type': 'text/html' }
            }
        );
    }
}

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

Start your application using the command:

npm run dev

Output:

Benefits of Middleware

• It can handle user authentication and authorization processes.
• It is used to manage user sessions and handle session creation, tracking, and expiration.
• It is used to validate user input to prevent common security vulnerabilities such as cross-site scripting (XSS), and SQL injection.
• It can add, modify, or remove HTTP headers in incoming or outgoing requests and responses.
• It can be used to redirect users at the server level based on user role.