[29] 미들웨어에 대해서 설명해주세요. 사용 경험이 있다면 구현 방식을 설명해주세요.

[hyeyoonS]

📎 질문

미들웨어에 대해서 설명해주세요. 사용 경험이 있다면 구현 방식을 설명해주세요.

✏ 구술 답변 키워드

• middleware 역할
• middleware 활용
• middleware 주의점

✏ 서술 답변

Next.js에서 middleware의 역할

middleware는 요청(request)이 수행되기 이전에 실행되는 코드입니다. Request객체와 Response객체에 접근할 수 있어 Request에 따라 Response를 rewriting, redirecting, modifying 할 수 있습니다.

middleware는 캐쉬된 컨텐츠 이전에 실행되며 매 라우트마다 호출됩니다.

middleware를 사용하면 성능, 보안 그리고 사용자 경험을 향상시킬 수 있습니다.

활용 요소

• 인증 인가 (Authorization Authentication) : 특정 페이지로 라우팅하기 이전에 user의 identity를 확인하고 라우팅합니다.
• 서버사이드 리다이렉트 : 특정 조건에 따라 서버 단계에서 사용자를 리다이렉트 시킵니다. ex)사용자의 역할에 따른 redirect
• Bot detection : bot에 의한 트래픽을 감지하여 자원을 보호합니다.

주의할 점

• 복잡한 data fetching 및 관리 : middleware는 data fetching에 적합하게 만들어지지 않았습니다. 복잡한 data fetching은 route handler 혹은 server util에서 처리해야 합니다.
• 복잡한 연산 : middleware는 가벼워야 합니다. 무겁고 복잡한 연산은 페이지 로드를 지연시킵니다.
• 확장된 세션 관리 : middleware가 session관리를 위해 만들어졌다고는 하지만 확장된 세션관리(oAuth)는 관련된 인증서비스를 이용하거나 route handler를 이용하는 것을 추천합니다.
• 직접적인 데이터베이스 조작

middleware를 사용한 이유

• 로그인 유무에 따라 redirect
• 쿠키 조작 get getAll delete set 으로 쿠키를 조작할 수 있습니다.

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

export async function middleware(request: NextRequest) {
  const accessToken = request.cookies.get("accessToken");
  const path = request.nextUrl.pathname;

  if (accessToken) {
    if (path === "/" || path.startsWith("/login") || path.startsWith("/signup")) return NextResponse.redirect(new URL("/home", request.url));

    if (accessToken is expired) {
      //accessToken만료일경우
      const response = NextResponse.next();
      const newAccessToken = await getRefreshToken();
       response.cookies.set("accessToken", newAccessToken);
       return response;
      }
    }

export const config = {
  matcher: ["/((?!api|_next/static\\/?).*)"],
};

middleware는 최상위 폴더에 middleware.ts(.js) 파일을 만들어 사용합니다. middleware 파일은 1개만 사용 가능합니다.