[Next.js 로그인 흐름 완전 정리] middleware + 쿠키 인증 + 보호 레이아웃 구현하기

1. 전체 흐름 개요

Next.js에서 로그인 인증은 보통 다음과 같은 흐름으로 구성됩니다:

1. 사용자가 로그인 → 서버에서 JWT 발급
2. JWT를 쿠키에 저장 (`HttpOnly`)
3. 요청마다 쿠키 확인 → 인증 상태 유지
4. middleware에서 인증 여부 확인 → 리디렉션
5. 인증된 사용자만 접근 가능한 레이아웃 구성

 

2. 로그인 요청 처리(API)

// app/api/login/route.ts
import { cookies } from 'next/headers';

export async function POST(request: Request) {
  const body = await request.json();
  const token = await loginAndGetToken(body); // 인증 처리 로직

  cookies().set('accessToken', token, {
    httpOnly: true,
    path: '/',
    secure: true,
  });

  return new Response(JSON.stringify({ success: true }));
}

✅ cookies().set()으로 서버 쿠키 설정
✅ httpOnly 옵션으로 XSS 방지

 

 

3. middleware.ts로 보호

// middleware.ts
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export function middleware(request: NextRequest) {
  const token = request.cookies.get('accessToken');

  // 인증 안 된 사용자는 로그인 페이지로 리디렉션
  if (!token && request.nextUrl.pathname.startsWith('/dashboard')) {
    return NextResponse.redirect(new URL('/login', request.url));
  }

  // 로그인 사용자가 로그인 페이지 접근 시 홈으로
  if (token && request.nextUrl.pathname === '/login') {
    return NextResponse.redirect(new URL('/dashboard', request.url));
  }

  return NextResponse.next();
}

export const config = {
  matcher: ['/dashboard/:path*', '/login'],
};

 

 

4. 인증된 사용자 전용 레이아웃

// app/dashboard/layout.tsx
import { cookies } from 'next/headers';
import { redirect } from 'next/navigation';

export default function DashboardLayout({ children }: { children: React.ReactNode }) {
  const token = cookies().get('accessToken');

  if (!token) redirect('/login');

  return (
    <div>
      <Sidebar />
      <main>{children}</main>
    </div>
  );
}

✅ 서버 컴포넌트 안에서 redirect() 사용 가능
✅ middleware와 중복되더라도 보안 이중 방어로 추천

 

 

5. 로그아웃 처리

// app/api/logout/route.ts
import { cookies } from 'next/headers';

export async function POST() {
  cookies().delete('accessToken');
  return new Response(null, { status: 204 });
}

클라이언트에서는 버튼 클릭 시 /api/logout 호출 후 /login으로 이동하면 됨

 

 

💡 요약

Next.js의 App Router 환경에서는 `middleware`와 `cookies`를 활용한 인증 흐름이 매우 강력하고 깔끔합니다.

- 로그인 시 JWT를 쿠키로 저장
- middleware로 보호 라우팅 설정
- layout.tsx 안에서 서버 렌더링 기준 인증 검사

정적인 페이지와 다르게, 접근 제어를 서버단에서 확실하게 할 수 있어 보안에 유리합니다.