Next.js 15 Authentication And Session Management in 30 Minutes | Next.js Tutorial For Beginners
- Next.js 15에서 사용자 인증 및 세션 관리를 프로젝트 기반 학습으로 다룹니다. 🚀
- 사용자 자격 증명으로 폼 제출, 사용자 인증, 브라우저 쿠키를 사용한 무상태 세션 관리를 학습합니다. 🔐
- 클라이언트 및 서버 컴포넌트를 활용하여 폼을 효율적으로 관리하는 방법을 설명합니다. 💻
- Next.js 인증 흐름은 클라이언트 폼 -> 서버 액션 -> 데이터 유효성 검사 -> API 인증 -> 세션 생성 -> 쿠키에 사용자 정보 저장 -> 권한 부여 -> 리디렉션 순으로 진행됩니다. 🗺️
- 서버 액션은 서버에서 실행되는 비동기 함수로, 'use server' 지시어를 사용하며 폼 데이터를 받아 API 호출 및 로직을 처리합니다. ⚙️
useActionState (이전 useFormState)를 사용하여 서버 액션에서 발생한 오류 메시지를 클라이언트에 표시할 수 있습니다. ⚠️
- 인증 성공 후, Next.js가 생성하는 기본 세션에 사용자 정보를 추가하기 위해 브라우저 쿠키를 활용하여 세션 관리를 구현합니다. 🍪
- Axios와 JSON Server를 사용하여 사용자 로그인 API 호출 및 데이터 유효성 검사를 시연합니다. 📡
- 로그인 성공 시
next/navigation의 redirect 함수를 사용하여 사용자를 원하는 페이지로 이동시킵니다. ➡️
- 사용자 상호작용이 있는 폼 컴포넌트는 반드시 'use client' 지시어를 사용하여 클라이언트 컴포넌트로 정의해야 합니다. 🌐