본문 바로가기
C.W.K.
Stream
Lesson 02 of 08 · published

Next.js가 대신 맡아주는 일

~22 min · conventions, Turbopack, App Router

Level 0호기심
0 XP0/68 lessons0/11 achievements
0/120 XP to next level120 XP to go0% complete

문제마다 책임질 파일이 정해져 있어

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 내장 경로와 외부 패키지 경로의 실패·업그레이드·배포 책임을 표로 만들어. 내장 기능이 요구를 충족하는데도 외부 도구를 고른다면 무엇을 새로 얻고 어떤 계약을 추가하는지 한 문장으로 설명할 수 있어야 해.

Code

최신 Next.js 프로젝트 만들기·bash
npx create-next-app@latest cwk-app
cd cwk-app
# 선택: TypeScript 사용, ESLint 사용, Tailwind는 요구에 따라 선택, App Router 사용,
# Turbopack 사용, src/ 미사용, import 별칭은 '@/*'.
npm run dev
# Turbopack HMR로 http://localhost:3000 dev 서버
설치 결과 확인하기·bash
tree -L 2 -I node_modules
# .
# ├── app/
# │   ├── layout.tsx
# │   ├── page.tsx
# │   └── globals.css
# ├── public/
# ├── next.config.ts
# ├── package.json
# └── tsconfig.json

External links

Exercise

create-next-app으로 프로젝트를 만들고 생성된 파일의 책임을 정리해. 첫 라우트와 루트 레이아웃의 위치, 각 질문에서 선택한 기본값과 그 이유도 함께 기록해.

Progress

Progress is local-only — sign in to sync across devices.
이 페이지에서 버그를 발견하셨거나 피드백이 있으세요?문제 신고

댓글 0

🔔 답글 알림 (로그인 필요)
로그인댓글을 남기려면 로그인해 주세요.

아직 댓글이 없어요. 첫 댓글을 남겨보세요.