Next.js Middleware, 더 간결하고 효율적으로 관리하는 방법

Next.js에서 middleware.ts를 사용하면 글로벌하게 미들웨어를 적용할 수 있습니다. 하지만, 실제 개발 과정에서 다음과 같은 불편함을 겪을 수 있습니다.

모든 요청에 적용됨: 특정 라우트에만 미들웨어를 적용하고 싶어도 별도의 처리가 필요합니다.
복잡한 조건문: if문을 통해 특정 라우트를 검사하고 실행하는 방식이 번거롭고 유지보수가 어렵습니다.

이러한 문제를 해결하기 위해 next-middleware-enhancer를 개발하게 되었습니다. 이제, 제가 어떻게 개선하였는지에 대해 알려드리고자 합니다!

기존 방식의 문제점

1. 모든 요청에 적용됨

기본적으로 Next.js의 middleware.ts는 모든 요청에 대해 실행됩니다. 특정 경로에서만 실행하고 싶다면, if문을 사용하여 경로를 직접 필터링해야 합니다.

import { NextRequest, NextResponse } from "next/server";

export function middleware(req: NextRequest) {
  console.log(`Request received: ${req.nextUrl.pathname}`);
  return NextResponse.next();
}

이 방식은 모든 요청을 처리하기 때문에 불필요한 실행이 발생할 수 있습니다.

2. 복잡한 조건문 문제

특정 경로에서만 인증을 적용해야 할 경우, if문을 이용해 직접 필터링해야 합니다. 예를 들어, /admin 경로에서만 인증을 적용하려면 다음과 같이 작성해야 합니다.

import { NextRequest, NextResponse } from "next/server";

export function middleware(req: NextRequest) {
  if (req.nextUrl.pathname.startsWith("/admin")) {
    if (!req.headers.get("Authorization")) {
      return NextResponse.json({ message: "Unauthorized" }, { status: 401 });
    }
  }
  return NextResponse.next();
}

이러한 방식은 미들웨어가 많아질수록 코드가 길어지고 관리가 어려워질 수 있습니다.

next-middleware-enhancer 이렇게 활용해보세요

이 라이브러리는 Next.js의 미들웨어를 보다 선언적으로 사용할 수 있도록 설계되었습니다.

npm install next-middleware-enhancer or

pnpm add next-middleware-enhancer

import { NextRequest, NextResponse } from "next/server";
import { createMiddleware } from "next-middleware-enhancer";

const logMiddleware = (req: NextRequest) => {
  console.log(`Request to: ${req.nextUrl.pathname}`);
};

const authMiddleware = (req: NextRequest) => {
  if (!req.headers.get("Authorization")) {
    return NextResponse.json({ message: "Unauthorized" }, { status: 401 });
  }
};

const { middleware, config } = createMiddleware([{ matcher: "/admin", handler: [logMiddleware, authMiddleware] }]);

export { middleware, config };