Next.js 14 App Router 기반 Supabase 세션 유지 구조 설계

Fix Supabase Auth Session Not Persisting After Refresh

Mahdi BEN RHOUMA2026년 4월 15일10분intermediate

AI 요약

Context

Next.js 14 App Router의 서버 사이드 렌더링과 클라이언트 Hydration 과정에서 발생하는 세션 유실 문제. Server Components가 브라우저 Cookie에 기본적으로 접근하지 못해 발생하는 인증 상태 불일치 현상.

Technical Solution

@supabase/ssr 패키지를 활용한 서버 및 클라이언트 전용 Supabase Client 분리 설계
next/headers의 cookies() 함수를 연동하여 Server Components 내 Cookie 읽기/쓰기 권한 확보
Middleware 계층에서 모든 요청마다 supabase.auth.getUser()를 호출하여 세션 만료 전 자동 갱신 로직 구현
Browser Client와 Server Client의 역할 분리를 통한 Hybrid Rendering 모델 최적화
localStorage 대신 HttpOnly Cookie 기반의 세션 저장 방식을 채택하여 SSR 보안성 및 호환성 강화

실천 포인트

- Server Components와 Client Components 각각에 맞는 전용 Client 생성 여부 확인 - Middleware의 Matcher 설정으로 정적 파일 제외 및 인증 체크 경로 최적화 수행 - @supabase/ssr 라이브러리를 통한 Cookie Store 인터페이스 구현 여부 검토 - 서버 사이드에서 getUser()를 통한 실제 세션 유효성 검증 단계 포함 여부 확인

태그

#Supabase #Middleware #Next.js #SSR #Session Management

원문 읽기