Next.js Mastery: A Comprehensive Guide - Part 6: Middleware and Authentication

Next.js Mastery: A Comprehensive Guide - Part 6: Middleware and Authentication

Introduction

In professional applications, securing your routes and handling requests before they reach your pages or API routes is critical. Middleware in Next.js allows you to intercept and modify requests, making it the perfect tool for authentication, authorization, and internationalization.

What is Middleware?

Middleware runs before a request is completed. It allows you to:

• Redirect users to login pages if they are unauthorized.
• Rewrite URLs for A/B testing or localization.
• Log or track incoming requests.

Implementing Middleware

Middleware is defined in a middleware.js file at the root of your project.

// middleware.js
import { NextResponse } from "next/server";

export function middleware(request) {
  const { pathname } = request.nextUrl;

  // Protect the dashboard route
  if (pathname.startsWith("/dashboard")) {
    const token = request.cookies.get("auth-token");
    if (!token) {
      return NextResponse.redirect(new URL("/login", request.url));
    }
  }

  return NextResponse.next();
}

// Specify paths that middleware should apply to
export const config = {
  matcher: ["/dashboard/:path*", "/profile/:path*"],
};

Authentication Patterns

With Next.js, authentication can be handled:

1. Client-side: Using libraries like NextAuth.js (Auth.js) to manage sessions.
2. Server-side: Middleware checks the token, then optionally fetches user data from your API or database.

Conclusion

Middleware provides a powerful, edge-ready way to secure your application. By intercepting requests, you can implement sophisticated authentication and routing logic that runs before the request even reaches your server-side logic, improving both performance and security.

Suggested Reading

• Next.js Middleware Documentation
• Auth.js (NextAuth.js) Documentation