
Kim JeongHyeonFrontend Focused Fullstack Developer
Next.js Middleware로 인증 가드, Supabase 세션 갱신, 경로 보호를 구현하는 방법.
Middleware는 요청이 완료되기 전에 실행되는 코드입니다. 인증, 리다이렉트, 헤더 조작 등에 활용합니다.
// middleware.ts (프로젝트 루트)
import { NextResponse } from "next/server";
import type { NextRequest } from "next/server";
export function middleware(request: NextRequest) {
// 요청 정보 활용
const { pathname } = request.nextUrl;
const locale = request.headers.get("accept-language")?.split(",")[0];
// 응답 헤더 추가
const response = NextResponse.next();
response.headers.set("x-pathname", pathname);
return response;
}
// 어떤 경로에 적용할지 지정
export const config = {
matcher: ["/((?!_next/static|_next/image|favicon.ico).*)"],
};export function middleware(request: NextRequest) {
const token = request.cookies.get("auth-token");
const isAdmin = request.nextUrl.pathname.startsWith("/admin");
const isLogin = request.nextUrl.pathname === "/admin/login";
if (isAdmin && !isLogin && !token) {
return NextResponse.redirect(new URL("/admin/login", request.url));
}
if (isLogin && token) {
return NextResponse.redirect(new URL("/admin/posts", request.url));
}
return NextResponse.next();
}Supabase Auth를 사용할 때 middleware에서 세션을 갱신해야 쿠키가 유지됩니다:
import { createServerClient } from "@supabase/ssr";
export async function middleware(request: NextRequest) {
let response = NextResponse.next({ request });
const supabase = createServerClient(
process.env.NEXT_PUBLIC_SUPABASE_URL!,
process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
{
cookies: {
getAll: () => request.cookies.getAll(),
setAll: (cookies) => {
cookies.forEach(({ name, value, options }) =>
response.cookies.set(name, value, options)
);
},
},
}
);
await supabase.auth.getUser(); // 세션 갱신 트리거
return response;
}matcher로 제외