TIL 67. 2024-04-05

• 로그인 여부에 따른 페이지 접근 막기 기능을 위해 middleware를 사용하였다.

  • next.js에서 제공하는 여러 redirect 방법 중 middleware를 사용한 이유는 현재 프로젝트에서 supabase라는 baas 서비스를 이용 중이며 자체적으로 로그인 관련 쿠키를 생성, 삭제, 그리고 세션 만료 시간에 다시 업데이트까지 쿠키 관리를 세밀하게 해주는 모습을 볼 수 있었고, 쿠키 자체를 암호화 시켜 관리하는 모습도 볼 수 있었다.
    또한, next.js에서 설명하는 내용 중 "많은 수의 리디렉션(1000개 이상)을 관리하기에는 Middleware가 적합하다"라는 문구를 볼 수 있었다.
    관련 공식 문서

import { updateSession } from "@/utils/supabase/middleware";
import { NextResponse, type NextRequest } from "next/server";

// 클라이언트의 요청이 서버에 도착하기 전 또는 응답이 클라이언트에게 전송되기 전에 미들웨어(중간 역할)가 실행됩니다.
export async function middleware(request: NextRequest) {
  const response = await updateSession(request);

  // header에 존재하는 쿠키는 암호화가 되어있어 직접 값에 접근하기 힘들다.
  const loginCookie = response.headers.get("x-middleware-request-cookie");
  const url = request.nextUrl.pathname;

  if (url == "/login" && loginCookie) {
    const url = request.nextUrl.clone();
    url.pathname = "/main";
    return NextResponse.redirect(url);
  }

  if (url == "/register" && loginCookie) {
    const url = request.nextUrl.clone();
    url.pathname = "/main";
    return NextResponse.redirect(url);
  }

  if (url.startsWith("/room") && (!url.endsWith("/") || !loginCookie)) {
    const url = request.nextUrl.clone();
    url.pathname = "/main";
    return NextResponse.redirect(url);
  }
}

// 아래의 경로를 제외한 모든 경로에서 미들웨어를 실행
// 이미지 파일 (svg, png, jpg, jpeg, gif, webp)
export const config = {
  matcher: ["/((?!_next/static|_next/image|favicon.ico|.*\\.(?:svg|png|jpg|jpeg|gif|webp)$).*)"]
};