Using Middleware in Next.js

Introduction

Middleware in Next.js allows you to run custom code before a request is completed. This is useful for tasks such as authentication, logging, and more.

What is Middleware?

Middleware functions are functions that have access to the request object (req), the response object (res), and the next middleware function in the application's request-response cycle.

How to Use Middleware

1. Create a middleware file in your Next.js project.
2. Define your middleware function.
3. Apply the middleware to your routes.

1. Create a Middleware File

Create a new file named middleware.js in the root of your Next.js project.

2. Define Your Middleware Function

export function middleware(req, res, next) {
    // Custom middleware logic
    console.log('Middleware executed');
    next(); // Proceed to the next middleware or route handler
}

3. Apply the Middleware to Your Routes

import { middleware } from './middleware';

        export default function handler(req, res) {
            middleware(req, res, () => {
                // Route handler logic
                res.status(200).json({ message: 'Hello from the route!' });
            });
        }

Code Example

Here is a complete example of using middleware in a Next.js API route:

// middleware.js
        export function middleware(req, res, next) {
            if (!req.headers.authorization) {
                res.status(401).json({ message: 'Unauthorized' });
                return;
            }
            next();
        }

        // pages/api/secure.js
        import { middleware } from '../../middleware';

        export default function handler(req, res) {
            middleware(req, res, () => {
                res.status(200).json({ message: 'Access granted!' });
            });
        }

Best Practices

• Keep middleware functions small and focused.
• Use middleware for cross-cutting concerns.
• Document your middleware functions for clarity.

FAQ