Build an Advanced Realtime Chat Project with Supabase
- Supabase와 Next.js를 활용하여 GitHub 인증, 다양한 채팅방(공개/비공개, 초대 기능), 그리고 복잡한 권한 관리를 포함하는 고급 실시간 채팅 애플리케이션 구축 방법을 소개합니다. 🚀
- 프로젝트는 Next.js 14 (TypeScript, ESLint, Tailwind 포함)로 시작하며,
src 폴더 구조를 선호하여 설정합니다. 🛠️
- Supabase를 백엔드로 사용하여 실시간 기능을 쉽게 구현하며, 특히 Next.js에서 웹소켓 처리가 어려운 점을 보완합니다. ☁️
- Supabase의 UI 라이브러리(Shad CN 기반)를 활용하여 클라이언트, 미들웨어, 서버 연결을 위한 초기 설정을 간편하게 진행합니다. 🎨
- Supabase 미들웨어는 세션 업데이트 및 미인증 사용자 자동 로그인 페이지 리다이렉션(
/o/login )을 처리하여 인증 흐름을 자동화합니다. 🔐
- Supabase 프로젝트의 API 키(URL,
anon 키, secret 키)를 Next.js 환경 변수에 설정하여 백엔드와 프론트엔드 연결을 준비합니다. 🔑
- GitHub OAuth 인증을 위해 Supabase와 GitHub 개발자 설정을 연동하며, 클라이언트 ID, 클라이언트 시크릿, 콜백 URL을 구성합니다. 🐙
- Next.js 14의 변경 사항에 따라
middleware.ts 파일을 proxy.ts로 변경하고 함수 이름을 업데이트하여 오류를 해결합니다. 🔄
- 로그인 성공 시 사용자를
/protected 페이지 대신 애플리케이션의 루트(/) 페이지로 리다이렉션하도록 설정을 변경합니다. 🏠
- 데이터베이스는
chat_rooms, messages, room_users, user_profiles 네 가지 테이블로 구성하며, 클라이언트에서 데이터 접근을 위해 Row-Level Security (RLS)를 활성화하고 ID 필드에 UUID를 사용합니다. 🗄️