이 편에서 만드는 파일

개념 편입니다. 새로 만들거나 고치는 파일이 없습니다. 03편부터 실제로 bookshelf-next 프로젝트를 만들며 이 편에서 정리한 구조를 그대로 적용합니다.

개념 정리

react_3 bookshelf가 브라우저에서 하는 일

react_3에서 완성한 bookshelf는 SPA(Single Page Application)입니다. 브라우저가 처음 받는 HTML은 빈 div 하나뿐이고, 화면은 자바스크립트 번들이 실행된 뒤에야 그려집니다. 책 목록도 컴포넌트가 마운트된 다음 useQuery가 mock API를 호출해야 나타납니다.

이 방식에는 세 가지 한계가 있습니다.

Next.js는 이 세 가지를 서버에서 먼저 렌더링하는 방식으로 다르게 풉니다. 서버가 데이터를 읽고 HTML을 만들어 브라우저에 보내므로, 화면은 자바스크립트 실행을 기다리지 않고도 먼저 보입니다.

파일 기반 라우팅

react_3는 react-router로 라우트를 코드로 선언했습니다. 라우터 컴포넌트에 path와 element를 나열하는 방식입니다. Next.js App Router는 라우트를 코드가 아니라 폴더 구조로 선언합니다. app 폴더 안 폴더 하나가 URL 세그먼트 하나에 대응합니다.

대괄호로 감싼 폴더명([bookId])은 동적 세그먼트입니다. 05편에서 실제로 만듭니다.

App Router 파일 컨벤션

폴더 안에 정해진 이름의 파일을 두면 Next.js가 그 역할을 자동으로 인식합니다.

page.js가 없는 폴더는 URL로 접근할 수 없습니다. 이 규칙 덕분에 컴포넌트나 유틸 파일을 라우트 폴더 안에 함께 두어도 실수로 라우트가 되는 일이 없습니다.

bookshelf-next 청사진

react_1~3의 bookshelf 코드를 그대로 옮기지 않고, 같은 도메인(책 관리)을 App Router 구조로 새로 짭니다. 이후 편에서 하나씩 채울 라우트는 다음과 같습니다.

app/
├── page.js                 (홈 — 04편)
├── books/
│   ├── page.js              (책 목록 — 04편)
│   └── [bookId]/
│       └── page.js          (책 상세 — 05편)
└── api/
    └── books/
        └── route.js          (REST 엔드포인트 — 07편)

이 트리는 목표 지점을 미리 보여주기 위한 스케치이고, 실제로는 03편부터 한 단계씩 만듭니다.

왜 서버 컴포넌트가 기본값인가

App Router의 모든 컴포넌트는 별다른 표시가 없으면 서버 컴포넌트입니다. 서버 컴포넌트는 서버에서 실행되고 결과만 HTML과 최소한의 데이터로 브라우저에 전달됩니다. 상태나 이벤트 핸들러처럼 브라우저에서만 의미 있는 기능이 필요한 부분만 예외적으로 클라이언트 컴포넌트로 선언합니다. 이 경계를 어디에 그을지가 02편의 주제입니다.

직접 해보기

자주 하는 실수

확인 문제

참고 자료

• Next.js Blog — Next.js 16 
• Next.js Docs — Getting Started