Using Middleware in Next.js

What You’ll Learn 📚

• What middleware is and why it’s useful
• How to set up and use middleware in Next.js
• Progressively complex examples to solidify your understanding
• Common questions and troubleshooting tips

Introduction to Middleware

Middleware is like a checkpoint that processes requests before they reach your final destination (your API routes or pages). It’s a powerful tool for handling tasks like authentication, logging, and more.

Think of middleware as a security guard who checks your ticket before you enter a concert. 🎟️

Key Terminology

• Request: The information sent by the client to the server.
• Response: The information sent back from the server to the client.
• Next.js: A popular React framework for building web applications.

The Simplest Example 🚀

// pages/_middleware.js
export function middleware(req, ev) {
  console.log('Middleware is running!');
  return new Response('Hello from middleware!');
}

Progressively Complex Examples

Example 1: Conditional Middleware

// pages/_middleware.js
export function middleware(req, ev) {
  if (req.nextUrl.pathname.startsWith('/api')) {
    console.log('API request detected');
  }
  return new Response('Middleware processed the request');
}

Example 2: Authentication Middleware

// pages/_middleware.js
export function middleware(req, ev) {
  const token = req.cookies['auth-token'];
  if (!token) {
    return new Response('Unauthorized', { status: 401 });
  }
  return new Response('Authorized');
}

Example 3: Logging Middleware

// pages/_middleware.js
export function middleware(req, ev) {
  console.log(`Request made to: ${req.nextUrl.pathname}`);
  return new Response('Request logged');
}

Common Questions and Answers

1. What is middleware in Next.js?

   Middleware in Next.js is a function that runs before a request is completed. It can modify the request or response, or even stop the request altogether.

2. Why use middleware?

   Middleware is useful for tasks like authentication, logging, and modifying requests or responses before they reach your application logic.

3. How do I create middleware in Next.js?

   Create a _middleware.js file in your pages directory and export a function that takes a request and an event as parameters.

4. Can middleware be used for specific routes?

   Yes, place the _middleware.js file in a specific directory to apply it only to routes within that directory.

5. What happens if middleware returns a response?

   The request is terminated, and the response is sent immediately.

Troubleshooting Common Issues

If your middleware isn’t running, ensure the _middleware.js file is correctly placed in the pages directory.

Remember, middleware can only be used in Next.js 12 and later versions.

Practice Exercises

• Create middleware that redirects all requests to a maintenance page.
• Implement middleware that logs the request method (GET, POST, etc.).
• Try creating middleware that adds a custom header to all responses.

For more information, check out the Next.js documentation.