[Next.js] Middleware

Jay ·2022년 7월 13일

1. Middleware ?

정의

미들웨어는 운영 체제에서 제공하지 않는 일반적인 서비스와 기능을 애플리케이션에 제공하는 소프트웨어입니다. 데이터 관리, 애플리케이션 서비스, 메시징, 인증 및 API 관리는 주로 미들웨어를 통해 처리됩니다.

Next.js에서의 Middleware

미들웨어는 Request가 완료되기 전에 특정 코드를 실행할 수 있게 해준다. 따라서 Request 재작성 및 리다이렉팅, 헤더를 추가하거나 쿠키를 세팅하거나 할 수 있다.

2. How?

3. Why?

예를 들어 특정 페이지를 Admin만 접근가능하게 하고 싶을 때,
이를 CSR로 구현하려면 현재 사용자가 DB에 등록된 유저인지 아닌지 검증하는 과정을 거쳐야 하는데, 이 검증을 시행하는 동안 일정시간의 텀이 발생하고 그 시간동안 페이지가 외부에 노출되게 된다.

하지만 Middleware를 통해서 이런 문제를 해결할 수 있다.

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

export function middleware(request: NextRequest, event: NextFetchEvent) {
  if (!request.url.includes("/login") && !request.cookies.session) {
    return NextResponse.rewrite(new URL("/login", request.url));
  }
}

또한 유저가 Bot인지 혹은 특정 브라우저로 접속하는지 등등의 검증 또한 가능하다.

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

export function middleware(request: NextRequest, event: NextFetchEvent) {
  if (req.ua?.isBot) {
    return new Response("bot은 접근 불가.", { status: 403 });
  }
}