Insights/Projects3 [SwimX] Next.js15+NextAuth 연동 시 발생한 authOptions export 에러 해결하기 문제상황 src/app/api/auth/[...nextauth]/route.ts Type error: Route "..." does not match the required types of a Next.js Route. "authOptions" is not a valid Route export field. 원인 authOptions가 Export 되면서 Next.js의 라우트 타입 체계와 충돌 Next.js 13~15(app router 기반)에서 app/api/**/route.ts는 라우트 핸들러만 export 가능한 특별한 파일이다.export const authOptions = {...}; // ← 이게 문제!const handler = NextAuth(authOptions);export { h.. 2025. 4. 4. [SwimX] NextAuth 데모 로그인 기능 구현 - 세션 쿠키 정체 파헤치기 🍪 기술스택 요약, 기능 소개역할설명NextAuth로그인/로그아웃/세션 관리 담당 (OAuth, Credentials 등 지원)Supabase사용자 및 수영 기록 등 데이터를 저장하는 용도 (DB 역할)Credentials Provider이메일/비밀번호로 직접 인증 (직접 로직 작성 가능) Supabase 인증 기능을 쓰지 않고, NextAuth의 Credentials Provider를 활용해 authorize 함수 내부에서 demo 계정 인증 로직을 직접 작성했다. 로그인 페이지에서 데모 버튼 눌렀을 때 authorize( )에 작성한 조건을 통과하면 NextAuth가 세션을 생성하고, 브라우저에 저장된 쿠키를 통해 인증 상태를 유지하게 된다. 로그인 후 생기는 쿠키 정체 파헤치기 쿠키 이름의미 및 역할.. 2025. 4. 3. [동네zip] React 프로젝트에서 Next.js 폴더 기반 라우팅을 도입한 이유와 효과 🏁 도입 배경 : 구조화의 필요성!공부하거나 자습할 때는 아주 작은 규모의 프로그램이었기 때문에, 폴더 구조에 대해 고민할 필요가 없었다.하지만 팀 프로젝트 단위로 확장되자 시작부터가 난관이었다. 특히 리액트는 컴포넌트 분리와 구조화가 아주 중요하기 때문에 고민이 더 길어질 수 밖에 없었다. 기획, 디자인이 끝난 직후(약 4일 소요) 바로 개발을 진행해야했고, 남은 기간이 2주 정도로 짧았기 때문에 1. 파일 구조로 인한 커뮤니케이션 낭비 줄이기!2. 개발 생산성 극대화 이 2가지 목표를 충족하는 설계가 필요했다. 결론 : Next.js의 폴더 기반 라우팅 구조 도입시원하게 결론부터 말하자면!! React 프로젝트였지만 Next.js의 file-base rouing 구조를 차용해 폴더 구조를 설계했다.이미.. 2025. 3. 4. 이전 1 다음
