1단계 — 프로젝트 셋업

pnpm create next-app@latest my-fullstack \
  --typescript --tailwind --app --src-dir --turbo
cd my-fullstack

옵션 의미:

• --typescript — TS strict 모드
• --tailwind — Tailwind CSS v4 자동 설정
• --app — App Router (Pages Router 대신)
• --src-dir — 코드는 src/ 안에
• --turbo — Turbopack (Webpack 대신, 훨씬 빠름)

첫 페이지 수정

src/app/page.tsx:

export default function Home() {
  return (
    <main className="grid min-h-screen place-items-center">
      <h1 className="text-3xl font-bold">My Fullstack</h1>
    </main>
  );
}

pnpm dev 후 http://localhost:3000 확인.

다음 단계

2단계: Server vs Client 컴포넌트 →