Next.js2 [swimX] react-hook-form + Supabase 타입 불일치 해결하기 🛠️ Next.js 프로젝트에서 react-hook-form, zod, Supabase를 사용해서 일기 작성 폼을 구현하던 중폼과 데이터베이스 타입 간 불일치 문제가 발생했다. 그중 `string enum`과 `number` 타입 간 충돌을 타입 변환 처리를 통해 해결한 과정을 정리했다. 문제 상황수영 일기 작성 흐름은 아래와 같다 :사용자 입력 ↓React Hook Form (SwimFormData, zod 스키마 검사) ↓변환 함수 (toSwimLog) ↓SwimLog 구조로 전환 (중첩 구조 포함) ↓Supabase 저장 (insertSwimLog), zustand 저장 (setLog) react-hook-form을 통해 수집된 폼 데이터는 SwimFormData 타입으로 들어오며, 이 타입은 .. 2025. 4. 18. [SwimX] Next.js 서버 컴포넌트와 인증 분리로 NextAuth 에러 해결 🛠️ TL;DR Next.js App Router(15+), Supabase로 진행하는 프로젝트에서 서버 컴포넌트로 작성한 헤더 내부에서 NextAuth의 useSession()을 사용하자 런타임 에러가 발생했다. SessionProvider가 필요한 클라이언트 컴포넌트를 서버 트리에서 렌더링했기 때문이었다. 해결을 위해 인증 UI 컴포넌트(로그인 버튼)만 클라이언트로 분리하고, layout.tsx에서는 와 children 모두를 로 감싸는 구조로 수정했다. 문제 상황 기술 스택: Next.js 15 App Router, NextAuth(Credentails), Supabase(DB전용, 인증은 NextAuth 처리)목표: SSR이 가능한 를 서버 컴포넌트로 유지하면서 로그인/로그아웃 버튼은 useSessi.. 2025. 4. 3. 이전 1 다음
