Next.js 프로젝트에서 Supabase와 App Router를 함께 사용할 때 보호된 페이지 접근 처리를 어떻게 해야 하는지에 대해 정리해보았습니다.

🔖 결론 요약

🧐 미들웨어 방식이 비추천인 이유

Next.js의 미들웨어(middleware.ts)는 Supabase 인증과 함께 사용할 때 다음과 같은 제한이 존재합니다:

1. ❌ 오직 cookies() 함수만 사용 가능하며 Supabase 세션 관리가 불안정합니다.
2. ❌ supabase.auth.getUser()는 미들웨어 환경에서 사용 불가합니다.
3. ❌ fetch 및 async/await 사용이 제한적이어서 복잡한 인증 로직이나 에러 처리가 어렵습니다.
4. ❌ 서버 컴포넌트의 redirect()와 충돌 가능성이 있습니다.

✅ 권장하는 실전 방식

서버 컴포넌트 내부에서 직접 Supabase 인증 세션을 확인하고, 없으면 바로 리디렉션을 처리하는 방식입니다.

// app/mypage/page.tsx
import { createServerClient } from '@/lib/supabase'
import { redirect } from 'next/navigation'

export default async function MyPage() {
  const supabase = createServerClient()
  const { data: { user } } = await supabase.auth.getUser()

  if (!user) {
    redirect('/auth/login')
  }

  return <div>✅ 로그인한 사용자만 볼 수 있는 마이페이지입니다.</div>
}

✅ Supabase 공식 문서에서도 권장하는 가장 안전한 방법입니다.

⚠️ 미들웨어로 가능한 방식(비추천)

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

export function middleware(request) {
  const isLoggedIn = request.cookies.has('sb-access-token')
  if (!isLoggedIn) {
    return NextResponse.redirect(new URL('/auth/login', request.url))
  }
  return NextResponse.next()
}

하지만 위 방법은: