2021년 11월 1일
Next.js 프로젝트 폴더 구조, 이렇게 나누면 덜 꼬인다 (App Router 기준)
nextjsarchitecturefolder-structureapp-router
app/ · features/ · components/ · lib/로 나누어, 작은 랜딩 페이지부터 대시보드까지 버티는 Next.js 폴더 구조를 정리한 실전 가이드입니다.
1app/에는 라우팅과 레이아웃만 두고, 도메인 로직은 features/로 분리한다
2features/ 폴더 안에서 도메인별로 components·lib·hooks·types를 함께 관리한다
3components/는 Button·Modal 같은 공용 UI만 두고, 도메인 냄새 나는 컴포넌트는 넣지 않는다
4lib/에는 React를 모르는 유틸·API 클라이언트·어댑터를 모아 재사용성을 높인다
5작은 프로젝트는 단순 구조로 시작하고, components/가 복잡해지면 그때 features/로 리팩터링한다