미들웨어 (Middleware)와 인증 흐름

사용자가 마이페이지나 결제 페이지에 접속하려 할 때, "이 사람이 로그인한 유저인가?"를 컴포넌트가 렌더링 되기 전에 미리 검사해서 튕겨내고 싶다면 어떻게 해야 할까요? 바로 미들웨어(Middleware)가 그 역할을 완벽하게 수행합니다.

Edge Runtime 기반의 빛의 속도 검증

Next.js의 미들웨어는 무거운 Node.js 서버가 아닌, 사용자와 물리적으로 가장 가까운 글로벌 Edge Network에서 가볍고 엄청나게 빠른 속도로 실행됩니다. 따라서 페이지가 뜨기 한참 전에 번개처럼 라우팅 방향을 틀어버릴 수 있습니다.

인증(Auth): 쿠키의 토큰 여부를 확인하여 로그인된 사용자만 접근하게 제어
A/B 테스트: 같은 경로로 들어와도 유저 아이디에 따라 A페이지나 B페이지로 몰래 보여주기 (Rewrite)
국제화(i18n): 사용자의 접속 국가(IP)나 브라우저 언어 세팅을 감지하여 알맞은 언어 폴더로 리다이렉트

// ==========================================
// 📂 middleware.ts (반드시 app 폴더 밖인 프로젝트 최상단 src/ 경로에 위치)
// 쿠키 기반의 강력한 로그인 인증 방어벽
// ==========================================
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export function middleware(request: NextRequest) {
  // 사용자가 진입하려 하는 목적지 URL을 가져옵니다. (예: /dashboard/settings)
  const path = request.nextUrl.pathname;
  
  // 1. 보안이 필요한 경로인지 확인 (이 예제에서는 /dashboard 로 시작하는 모든 경로)
  const isProtectedRoute = path.startsWith('/dashboard');

  // 2. 브라우저의 쿠키에서 로그인 인증 토큰(세션)을 꺼내봅니다.
  const hasToken = request.cookies.has('auth_session_token');

  // 3. 만약 보호된 경로로 들어가려는데 토큰이 없다면? => 철통 방어!
  if (isProtectedRoute && !hasToken) {
    console.log("🚨 미인증 사용자 접근 시도! 로그인 페이지로 쫓아냅니다.");
    
    // 강제로 /login 페이지로 돌려보냅니다.
    return NextResponse.redirect(new URL('/login', request.url));
  }

  // 4. 로그인된 유저이거나 보호된 경로가 아니라면 무사통과!
  return NextResponse.next();
}

// 💡 보너스 팁: 미들웨어가 모든 파일(이미지, CSS 등)에서 매번 실행되면 성능이 떨어지므로,
// 아래 config를 통해 '특정 경로'에서만 미들웨어가 작동하도록 필터링을 걸어줍니다.
export const config = {
  matcher: [
    /*
     * 다음으로 시작하는 경로는 무시합니다:
     * - api (API 라우트)
     * - _next/static (정적 스크립트)
     * - _next/image (이미지 최적화 파일)
     * - favicon.ico (파비콘)
     */
    '/((?!api|_next/static|_next/image|favicon.ico).*)',
  ],
};