Next.js + Supabase 프로젝트 구조 잡기

App Router 기반 프로젝트에서 Supabase를 붙일 때, 가장 먼저 정해야 하는 것은 데이터 경계다. 어디까지 서버 컴포넌트에서 읽고, 어디부터 클라이언트로 넘길지 선을 그어야 한다.

폴더 구조

src/
  app/        # 라우트(서버 컴포넌트 기본)
  components/  # UI · 사이트 컴포넌트
  lib/        # 데이터 접근 · 타입

데이터 경계 원칙

• 읽기는 가능한 한 서버 컴포넌트에서.
• 사용자 입력·인터랙션만 클라이언트 컴포넌트로.
• 타입은 lib에 모아 한 곳에서 관리한다.

구조를 먼저 정하면, 기능을 추가할 때마다 "이건 어디에 두지?"를 다시 고민하지 않아도 된다.