통합 요약노트
Ch.16 Next.js 입문 — 풀스택 React 프레임워크
App Router, 서버 컴포넌트, 파일 기반 라우팅
이 챕터의 내용
React만으로는 부족한 이유
Next.js — React에 서버 렌더링, 라우팅, 최적화를 더한 풀스택 프레임워크입니다.
React = CSR (Client Side Rendering) 브라우저에서 JavaScript로 화면을 그립니다
Next.js = React + 서버 렌더링 서버에서 완성된 HTML을 보내줍니다
Next.js 13+의 App Router 폴더가 곧 URL입니다
페이지와 라우팅
동적 라우팅 — [id] 폴더 하나로 모든 동적 URL을 처리합니다.
폴더 구조가 곧 URL입니다 page.tsx가 있는 폴더 = 접근 가능한 페이지
[대괄호] 폴더 = 동적 경로 URL의 일부를 변수로 받습니다
페이지 이동은 Link 컴포넌트로 새로고침 없이 빠르게 전환됩니다
서버 vs 클라이언트 컴포넌트
서버 컴포넌트 = 데이터, 클라이언트 컴포넌트 = 인터랙션. 역할을 나누면 빠르고 안전합니다.
Next.js의 모든 컴포넌트는 기본적으로 서버 컴포넌트입니다
'use client' 한 줄이면 브라우저에서 실행되는 컴포넌트로 전환됩니다
서버에서 데이터를 가져오고 클라이언트에서 인터랙션을 처리합니다
핵심 용어 모음
SEO 불가
검색 봇이 빈 HTML만 보고 돌아감 — 검색 노출 안 됨
느린 초기 로딩
JS 전체를 다운로드해야 첫 화면이 보임
소셜 미리보기 실패
카카오톡/슬랙에 URL 공유 시 미리보기 안 됨
서버 사이드 렌더링
서버에서 HTML을 완성하여 전송 — SEO 해결
파일 기반 라우팅
폴더 구조 = URL — react-router 불필요
자동 코드 분할
페이지별로 JS를 나눠서 빠른 로딩
API 라우트
같은 프로젝트에서 백엔드 API도 작성
<Link>
선언적 이동 — 일반 링크에 사용
router.push()
프로그래밍 이동 — 로직 후 이동에 사용
router.replace()
히스토리 교체 — 뒤로가기 방지
router.back()
뒤로 가기 — 브라우저 뒤로가기와 동일
JS 번들 없음
서버에서 실행되므로 브라우저에 JS를 보내지 않음 — 빠름!
비교 정리
| 항목 | 서버 컴포넌트 | 클라이언트 컴포넌트 |
|---|---|---|
| async/await | ✅ 가능 | ❌ 불가 |
| useState/useEffect | ❌ 불가 | ✅ 가능 |
| onClick 등 이벤트 | ❌ 불가 | ✅ 가능 |
| DB/파일 직접 접근 | ✅ 가능 | ❌ 불가 |
퀴즈와 인터랙션으로 더 깊이 학습하세요
play_circle인터랙티브 코스 시작하기