Next.js Middleware: Using Multiple Middlewares in middleware.ts

• Introduction
• Step-by-Step Guide
• Code Example
• Additional Notes
• Summary
• Conclusion
• References

Next.js middleware empowers you to execute code before a request hits your page, proving invaluable for tasks like authentication, redirects, and header manipulation. This article will guide you through creating middleware functions, understanding their placement and execution order, and effectively chaining them for complex scenarios. We'll illustrate these concepts with practical examples, including combining authentication and logging middleware. By the end, you'll grasp how middleware can enhance your Next.js application's security, SEO, and user experience.

Next.js middleware allows you to run code before a request reaches your page. This is useful for tasks like authentication, redirecting users, or modifying headers. You can have multiple middleware functions, and they execute in the order they're defined within a specific directory.

1. Creating Middleware Functions

A middleware function is defined in a middleware.ts file within your app's directory. Here's a basic example:

// app/login/_middleware.ts
import { NextResponse } from 'next/server';

export function middleware(request) {
  // Check if the user is authenticated (example logic)
  const isAuthenticated = false; 

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

  // If authenticated, continue to the requested page
  return NextResponse.next();
}

2. Middleware Placement and Execution Order

• Directory-based: Place middleware.ts in the directory where you want the middleware to apply. For example, app/login/_middleware.ts applies to all routes within the app/login directory.
• Nested Middleware: Middleware in nested directories runs before middleware in parent directories. For instance, app/dashboard/_middleware.ts runs before app/middleware.ts for requests within app/dashboard.
• Root Middleware: A middleware.ts file in your project's root directory (app/middleware.ts) applies to all requests.

3. Chaining Middleware

While you can't directly chain middleware functions, their execution order is determined by their directory structure. If you need to execute logic in a specific sequence, you can:

• Break down logic: Create separate middleware functions for distinct tasks and place them in the appropriate directories.
• Conditional Logic: Use conditional statements within a single middleware function to control the execution flow based on request properties.

Example: Combining Authentication and Logging

// app/_middleware.ts (Logs all requests)
import { NextResponse } from 'next/server';

export function middleware(request) {
  console.log(`Incoming request to: ${request.url}`);
  return NextResponse.next();
}

// app/dashboard/_middleware.ts (Protects dashboard routes)
import { NextResponse } from 'next/server';

export function middleware(request) {
  const isAuthenticated = true; // Replace with your authentication check

  if (!isAuthenticated) {
    return NextResponse.redirect(new URL('/login', request.url));
  }

  return NextResponse.next();
}

In this example:

1. All requests are logged due to app/_middleware.ts.
2. Requests to /dashboard and its subroutes are further processed by app/dashboard/_middleware.ts, which handles authentication.

Key Points:

• Middleware runs on the server, providing access to request and response objects.
• Use NextResponse.next() to pass control to the next middleware or the route handler.
• Middleware can significantly improve your application's security, SEO, and user experience.

Remember to consult the Next.js documentation for the most up-to-date information and advanced use cases.

This code is an example of how to use Next.js middleware for authentication and logging. It includes a root middleware that logs all incoming requests, an authentication middleware that protects the /dashboard route, a login page that sets a cookie upon successful login, and a dashboard page that is only accessible after authentication. The example demonstrates how to combine multiple middleware functions to achieve different functionalities.

This example demonstrates how to use Next.js middleware for authentication and logging.

Project Structure:

app/
├── login/
│   └── _middleware.ts
├── dashboard/
│   └── _middleware.ts
└── _middleware.ts
pages/
├── login.js
└── dashboard.js

1. Root Middleware (app/_middleware.ts):

// app/_middleware.ts
import { NextResponse } from 'next/server';

export function middleware(request) {
  console.log(`Incoming request to: ${request.url}`);
  return NextResponse.next();
}

This middleware logs all incoming requests to the console.

2. Authentication Middleware (app/dashboard/_middleware.ts):

// app/dashboard/_middleware.ts
import { NextResponse } from 'next/server';

export function middleware(request) {
  // Simulate authentication check (replace with your logic)
  const isAuthenticated = request.cookies.get('token') ? true : false;

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

  // If authenticated, continue to the dashboard route
  return NextResponse.next();
}

This middleware protects all routes within the /dashboard directory. It checks for a hypothetical authentication token (replace with your actual authentication mechanism). If not authenticated, it redirects the user to the /login page.

3. Login Page (pages/login.js):

// pages/login.js
import { useState } from 'react';

export default function LoginPage() {
  const [loggedIn, setLoggedIn] = useState(false);

  const handleLogin = () => {
    // Simulate successful login (replace with your logic)
    setLoggedIn(true);

    // Set a cookie to indicate authentication (replace with your logic)
    document.cookie = 'token=some-auth-token';
  };

  return (
    <div>
      {!loggedIn && (
        <button onClick={handleLogin}>Login</button>
      )}
      {loggedIn && (
        <p>You are logged in!</p>
      )}
    </div>
  );
}

This page provides a simple login form. Upon successful login, it sets a cookie to simulate authentication.

4. Dashboard Page (pages/dashboard.js):

// pages/dashboard.js
export default function DashboardPage() {
  return (
    <div>
      <h1>Welcome to the Dashboard!</h1>
    </div>
  );
}

This page represents a protected dashboard route accessible only after authentication.

Explanation:

• When a user accesses a protected dashboard route (e.g., /dashboard), the following happens:
  1. app/_middleware.ts logs the request.
  2. app/dashboard/_middleware.ts checks for authentication.
  3. If not authenticated, the user is redirected to /login.
  4. If authenticated, the user can access the dashboard.

This example demonstrates how to combine multiple middleware functions to achieve different functionalities. You can extend this pattern to implement other middleware features like header modification, A/B testing, and more.

Understanding the Power:

• Beyond Routing: Middleware is more than just redirects. It's a powerful tool for manipulating requests and responses before they hit your components. This opens up possibilities for tasks you'd typically handle on a server.
• Server-Side Execution: Middleware runs in a Node.js environment on the server. This means you have access to server-side APIs and functionalities that you wouldn't have in client-side JavaScript.

Best Practices and Considerations:

• Keep it Lean: Middleware should be lightweight and focused. Avoid complex logic or long-running operations that could impact response times.
• Security First: When handling authentication or sensitive data in middleware, always prioritize security best practices. Validate input, use secure cookies, and avoid exposing sensitive information.
• Testing is Crucial: Just like any other part of your application, middleware should be thoroughly tested to ensure it behaves as expected and doesn't introduce bugs.

Going Further:

• Data Fetching: While not its primary purpose, you can use middleware to fetch data from APIs and make it available to your components. However, for complex data fetching needs, Next.js data fetching methods like getServerSideProps or getStaticProps might be more suitable.
• Error Handling: You can implement centralized error handling in your middleware to catch and handle errors gracefully before they reach the user.
• Edge Runtime: Next.js middleware can run on the Edge, bringing benefits like improved performance and scalability. Consider deploying to the Edge for optimal results.

Remember: The provided examples are simplified for demonstration purposes. In a real-world application, you'll likely have more complex authentication mechanisms, logging systems, and other middleware functionalities.

Note: Middleware runs on the server and provides access to request and response objects. For detailed information and advanced use cases, refer to the official Next.js documentation.

In conclusion, Next.js middleware provides a powerful mechanism for intercepting and modifying requests and responses within your application. By strategically placing middleware.ts files and defining your middleware logic, you can implement essential features like authentication, redirects, logging, and more. Understanding the execution order based on directory structure and leveraging conditional logic empowers you to create sophisticated middleware chains for complex scenarios. Whether you're enhancing security, optimizing for SEO, or customizing user experiences, Next.js middleware proves to be an invaluable tool in your development arsenal. Remember to explore the official Next.js documentation for in-depth knowledge and advanced use cases to unlock the full potential of middleware in your applications.

• How to use multiple middlewares in Next.js using the middleware.ts ... | Summary How to use multiple middlewares in Next.js using the middleware.ts file? Additional information No response Example No response
• Nested Middleware | Next.js | Multi-Zones · Upgrading ... For example, a Middleware at pages/about/_middleware.ts ... file and model their execution depending on the incoming request.
• Implementing Multiple Middleware in Next.js: Combining NextAuth V ... | Subtle Middleware Mastery: Combining NextAuth and Internationalization in Next.js
• How do I create multiple middleware? : r/nextjs | Posted by u/Aqothy - 2 votes and 5 comments
• Three Things You Wanted to Know About Next.js Middleware | by ... | Middlewares became stable in Next 12.2. This is great news, since it’s mindblowing how much stuff can be done using this feature:
• Middlewares in Next 14 : r/nextjs | Posted by u/Playful-Kangaroo3468 - 5 votes and 3 comments
• Approach to Multiple Middleware and Auth Guard in Next.js App ... | Hey there! Ready to level up your Next.js website? 🚀 Let’s explore two powerful tools: Middleware and Authentication Guards.
• A Beginner's Guide to Setting Up NextJS Multiple Middlewares | Let's dive deep into configuring NextJS multiple middlewares.
• Chain Multiple Middleware Functions in NextJs 13 - YouTube | Aug 2, 2023 ... Comments129 · Chain NextAuth and Internationalization Middlewares in NextJs 14 · Server vs client components in NextJs 13 – When to use which.