[Next.js] Next.js Middleware / 미들웨어, 어떨 때 사용할까?

Middleware allows you to run code before a request is completed. Then, based on the incoming request, you can modify the response by rewriting, redirecting, modifying the request or response headers, or responding directly.

ㅡ Next.js 공식문서

 

한마디로 미들웨어란 요청이 들어왔을 때 해당 요청에 대해 응답을 보내기 전 무언가를 수행할 수 있게 해주는 중간자같은 역할을 한다고 볼 수 있다.

 

애플리케이션의 성능과 보안성, 사용자 경험을 강화하고자 할 때 사용되는데,
일반적으로 다음과 같은 경우에서 효과적으로 쓰인다 :

• 특정 페이지로 라우팅하기 전 세션 토큰이나 사용자 권한 등을 체크하고자 할 경우
• 페이지 또는 API에 접근하기 전 request data에 대해 정보를 확인 및 분석하고자 할 경우
• 유저에 따라 서버 사이드로 리다이렉트 시키는 경우
• 요청에 대한 응답을 변환시키거나 에러를 처리할 경우

 

 

미들웨어가 실행되는 시점

1. 서버로 요청을 보낼 시 (서버 API 실행 직전)
2. 특정 페이지로 접속 시 (특정 페이지 로드 직전)

 

 

 

미들웨어 사용 예시

root에 middleware.js라는 파일을 만들어 코드를 작성한다.

 

1) 특정 페이지에 접속한 사용자 기록하기

import { NextResponse } from "next/server";

export async function middleware(req) {
  if (req.nextUrl.pathname == "/list") {
    console.log(req.headers.get("sec-ch-ua-platform"));
    console.log(new Date());
    return NextResponse.next();
  }
}

• req.nextUrl : 사용자가 요청 중인 URL을 반환
• req.headers : 사용자에 대한 정보(브라우저, 언어, OS 정보 등)를 반환
• NextResponse.next() : 마지막에 return문에서 통과의 의미로 작성

 

2) 로그인 안 한 사용자의 접속 제한하기

import { NextResponse } from "next/server";
import { getToken } from "next-auth/jwt";

export async function middleware(req) {
  if (req.nextUrl.pathname.startsWith("/write")) {
    const session = await getToken({ req: req });
    console.log("세션", session);
    if (session == null) {
      return NextResponse.redirect(new URL("/api/auth/signin", req.url));
    }
  }
}

• NextResponse.redirect() : 특정 페이지로 리다이렉션

💭 NextResponse.rewrite() 과의 차이점?
rewrite는 url을 유지한 채로 다른 페이지로 이동을 시켜준다!

 

3) 특정 페이지 접속 시 쿠키 생성하기

import { NextResponse } from "next/server";
import { getToken } from "next-auth/jwt";

export async function middleware(req) {
  const session = await getToken({ req: req });

  if (req.nextUrl.pathname.startsWith("/register")) {
    if (req.cookies.has("visited") == false) {
      const res = NextResponse.next();
      res.cookies.set({
        name: "visited",
        value: "true",
        maxAge: 60 * 60,
        httpOnly: true,
      });
      return res;
    }
    return NextResponse.next();
  }
}

• req.cookies : 사용자가 보낸 쿠키 반환

예시에 나온 것들 외 request 또는 response와 관련된 함수들도 많은데, 이는 공식문서에 잘 나와 있으니 필요 시 직접 알아보는 것을 권장한다.

 

 

 

---

참고 :

https://nextjs.org/docs/app/building-your-application/routing/middleware

Routing: Middleware | Next.js

https://nextjs.org/docs/app/api-reference/functions/next-response#next

Functions: NextResponse | Next.js

https://velog.io/@pds0309/nextjs-%EB%AF%B8%EB%93%A4%EC%9B%A8%EC%96%B4%EB%9E%80

문서보며 알아보는 nextjs 미들웨어