개요

Next.js · Tailwind CSS · shadcn/ui — 세 도구가 각각 무엇을 푸는가

React는 써봤지만 App Router의 서버/클라이언트 구분이 흐릿한 사람, Tailwind를 쓰면서도 “클래스가 길어서 지저분하다”는 찜찜함이 남은 사람, shadcn/ui를 복붙 컴포넌트 모음 정도로만 알고 있는 사람을 위한 자료다.

Next.js 16.3 · React 19.2 · Tailwind CSS 4.3 · shadcn CLI 3.x 기준으로 쓰였다.

첫 장부터 읽기

구성

세 도구는 경쟁하지 않는다. 컴포넌트 / 스타일 언어 / 실행 환경이라는 서로 다른 층에 있다. 덱도 그 층을 따라간다.

1. 0~1장시작

   읽는 법 · 세 도구의 지형도

2. 2~8장 + 실전Next.js실행 환경

   서버 컴포넌트 · 라우팅 · 경계 · 데이터 · 캐싱 · 뮤테이션 · 성능 · 런타임 설정

3. 9~12장Tailwind CSS스타일 언어

   CSS의 문제 · Tailwind v4 · 실전 규칙 · 디자인 토큰

4. 13~16장shadcn/ui컴포넌트

   소유권 모델 · 설치 · 컴포넌트 해부 · 자산화

5. 17~19장시스템으로 만들기

   디자인 시스템 적용 · 접근성 · 폼과 상태

6. 20~21장마무리

   실전 패턴 · 안티패턴 · 정리

전체를 관통하는 두 문장

이 덱에는 처음부터 끝까지 따라다니는 질문이 하나 있다 — “이 코드는 어디서 실행되는가?” (빌드 타임 / 서버 요청 시 / 브라우저) Next.js를 어렵게 느끼는 이유의 대부분은 이 셋이 한 파일에 섞여 보이기 때문이다.

그리고 이 스택을 고르는 이유는 속도가 아니다. 디자인이 바뀔 때 드는 비용이 작다는 것이다. 그 비용을 결정하는 것이 12장의 토큰 층과 16장의 소유권 모델이다.

읽는 법

표시 약속

:::tip 박스는 핵심 원칙, :::caution 박스는 자주 겪는 함정이다.

가장 중요한 세 장

4장 경계 설계 · 12장 디자인 토큰 · 16장 자산화. 급하면 이 셋만 읽어도 된다.

손을 움직일 것

create-next-app + shadcn init으로 빈 프로젝트를 하나 띄워두고 읽는 것을 전제로 쓰였다.

버전에 민감하다

이 생태계는 빠르게 움직인다. 검색으로 찾은 글이 이미 한 세대 이전일 수 있다 — 0장의 대조표를 먼저 볼 것.

함정

middleware.ts, tailwind.config.js, asChild, forwardRef, fetch(url, { next: { revalidate } }) — 이 다섯 개가 나오는 자료는 한 세대 이전이다. 동작은 하지만 새로 배울 것은 그쪽이 아니다.

0. 시작하기 전에이 덱을 어떻게 읽을 것인가 — 대상 독자, 다루는 범위, 2026년 8월 기준으로 바뀐 것들.