문제마다 책임질 파일이 정해져 있어
Next.js를 빨리 배우는 요령은 API를 많이 외우는 게 아니야. 어떤 문제가 어느 파일과 관례의 책임인지 먼저 익히는 거지. 그 지도를 알고 있으면 기능을 추가할 때마다 새 패키지부터 찾는 실수를 피할 수 있어.
| 문제 | Next.js가 맡는 방식 |
|---|---|
| 주소와 화면 연결 | page.tsx가 있는 폴더가 라우트가 돼. |
| 공통 화면 | 세그먼트마다 layout.tsx를 둘 수 있어. |
| 로딩 상태 | loading.tsx가 Suspense 경계를 자동으로 연결해. |
| 오류 | 세그먼트에는 error.tsx, 루트에는 global-error.tsx를 둬. |
| 공개 HTTP 엔드포인트 | route.ts가 메서드별 요청을 처리해. |
| 서버 데이터 | 필요한 비동기 서버 컴포넌트에서 직접 읽어. |
| 변경 작업 | 'use server' 지시어가 붙은 서버 액션이 폼과 서버 로직을 이어 줘. |
| 번들링 | Next.js 16에서는 Turbopack이 개발과 빌드의 기본값이야. |
| 이미지·글꼴·스크립트 | next/image, next/font, next/script가 맡아. |
| 프로덕션 서버 | next start로 Node.js 환경이나 자체 호스트에서 실행해. |
새 프로젝트의 기본값
create-next-app은 TypeScript, ESLint, App Router, import alias 같은 결정을 한 번에 세워 줘. Tailwind와 src/ 사용 여부처럼 팀 취향이 필요한 것만 고르면 돼. 기본값을 무심코 누르는 게 아니라, 프레임워크가 어떤 계약을 대신 써 주는지 확인하면서 선택해.
내장 기능을 먼저 확인해야 하는 이유
외부 도구는 자기 세계의 가정을 함께 들고 와. Next.js의 내장 기능은 라우팅, 캐시, 서버 컴포넌트와 이미 같은 언어를 써. 기능이 겹친다면 내장 경로가 보통 더 단순해. 외부 도구는 요구사항이 기본 경로를 넘어설 때 꺼내도 늦지 않아.
기능을 구현하기 전에 app/의 어느 특수 파일이 그 책임을 이미 표현하는지 찾아봐. 로딩을 페이지의 조건문으로 넣기보다 loading.tsx에, 외부 HTTP 계약을 임의 서버 함수보다 route.ts에 두는 식이야. 책임을 둘 곳이 정해지면 팀원은 구현을 처음 보더라도 실패 범위와 실행 위치를 추론할 수 있어.
내장 기능을 쓴다는 말이 모든 추상화를 프레임워크에 맡기라는 뜻은 아니야. 도메인 규칙과 제품 정책은 앱이 소유해야 해. Next.js에는 실행과 전달의 배관을 맡기고, 주문·권한·가격처럼 제품의 의미는 순수한 모듈에 남겨야 프레임워크를 올려도 중심이 흔들리지 않아. 기능 하나를 골라 Next.js 내장 경로와 외부 패키지 경로의 실패·업그레이드·배포 책임을 표로 만들어. 내장 기능이 요구를 충족하는데도 외부 도구를 고른다면 무엇을 새로 얻고 어떤 계약을 추가하는지 한 문장으로 설명할 수 있어야 해.