[ Next.js - DeepDive ] -미들웨어 ( Middlewares )

https://nextjs.org/docs/advanced-features/middleware

Advanced Features: Middleware | Next.js

미들웨어는 request가 완료되기 전에 실행시킬 코드에 대해 정의할 수 있습니다. 그리고 우리는 이를 활용하여 들어오는 request에 대해 response를 덮어쓸 수도, redirecting할 수도, header를 추가할 수도 그리고 cookie를 설정할 수도 있게 됩니다.

 

그리고 이 미들웨어는 캐시된 파일 이전에 돌아갑니다. 그래서 우리가 static한 파일과 페이지를 만들 떄, 이미 인증이 되어 있어야 합니다.

 

사용하기

Next.js에서 미들웨어를 사용하는 방법은 매우 간단합니다. 그냥 pages폴더 안에 _middleware.ts파일을 추가해주면 됩니다.

 

/pages/_middleware.ts

export function middleware() {
  console.log("it works! global middleware");
}

다음과 같이 미들웨어를 선언하게 되면 모든 요청마다 위 middleware함수가 실행되어 서버 콘솔에 찍히게 됩니다.

 

그리고 이전에 carrot마켓을 클론코딩 했는데, 각 기능단위 마다 실행가능한 미들웨어를 따로 만들어 줄 수도 있습니다.

 

/pages/chats/_middleware.ts

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

export function middleware(
  req: NextRequest,
  ev: NextFetchEvent
) {
  console.log(req.ua);
  console.log("chats ONLY middleware");
}

다음과 같이 middleware의 인수로 req, ev를 받을 수 있는데, NextRequest에 어떤것이 있는지 간단히 알아보고 찍어보았습니다.

여기에 geo, ip, page,... 다양한 정보가 있는데, ua ( user agent )정보를 찍어보았습니다.

 

즉 최종적으로 /chats/6으로 GET요청을 보내면 위에서 만든 2개의 미들웨어가 다 차례대로 실행되어야 합니다.

잘 찍힙니다.