[241008] Next.js와 nextAuth 자동화 기능

그냥 node.js로 처음부터 구성할때는 요청해야 할 api설정, 미들웨어 등 직접 작성하고, 사용할 곳을 정했어야 했는데

Next.js 프레임워크와 nextAuth 라이브러리를 사용하니 자동으로 처리하는 것이 많아 혼란이 생겼다.

 

middleware.ts라는 파일을 만들기만 했는데 왜 자동으로 사용되는거지??

인증관련 코드에서 api/auth/session 같은 코드는 짠적이 없는데 왜 계속 신호가 가는거지?? 등등

 

편하긴 하지만 내가 알지 못하는 동작들이 있어서 머리가 아팠다.

그래서 검색을 통해 알아낸 정보를 적었다.

 

---

 

Next.js 자동화 기능

1. 라우팅 자동화
   • 파일 시스템 기반 라우팅
   • pages/ 또는 app/ 디렉토리의 파일 구조에 따라 자동으로 라우트 생성
   • 동적 라우트 ([id].js) 자동 처리
2. 코드 최적화
   • 자동 코드 분할 (Code Splitting)
   • 이미지 최적화 (next/image)
   • 자동 폰트 최적화
   • 자동 정적 최적화 (Automatic Static Optimization)
3. 빌드 프로세스
   • TypeScript 설정 자동화
   • 환경 변수 자동 로딩 (.env 파일)
   • Hot Module Replacement (HMR)

NextAuth.js 자동화 기능

1. API 라우트 자동 생성
   • /api/auth/[...nextauth] 경로가 자동으로 처리
   • 다음 엔드포인트 자동 생성:
     • /api/auth/signin
     • /api/auth/signout
     • /api/auth/session
     • /api/auth/providers
     • /api/auth/csrf
2. 세션 관리
   • 세션 생성 및 갱신 자동화
   • JWT 또는 데이터베이스 세션 자동 처리
3. 미들웨어 자동화
   • middleware.ts 파일 생성 시 자동으로 인증 체크
   • 설정된 경로에 대한 보호 자동화
4. 타입 안정성
   • Session 타입 자동 생성
   • API 응답 타입 자동 처리

자주 놓치는 자동화 기능들

1. 자동 리다이렉션
   • 인증되지 않은 사용자가 보호된 페이지 접근 시 자동 리다이렉트
   • 로그인 후 원래 페이지로 자동 리다이렉트
2. CSRF 보호
   • CSRF 토큰 자동 생성 및 검증
3. 애셋 최적화
   • 폰트, 이미지 등의 자동 최적화
   • 필요한 JS/CSS만 로드
4. 개발 환경 최적화
   • Fast Refresh
   • 에러 오버레이
   • TypeScript 오류 자동 보고

주의사항

1. 자동화된 기능을 오버라이드할 때는 주의가 필요
2. 커스텀 설정이 필요한 경우 공식 문서 참조
3. 자동화된 기능이 항상 최적은 아닐 수 있음