- 로그인 여부에 따른 페이지 접근 막기 기능을 위해 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);
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);
}
}
export const config = {
matcher: ["/((?!_next/static|_next/image|favicon.ico|.*\\.(?:svg|png|jpg|jpeg|gif|webp)$).*)"]
};