Next.js 프로젝트 초기화: App Router + TypeScript

핵심 개념

create-next-app·App Router·TypeScript strict·pnpm·폴더 구조 — 마스터 프로젝트 표준 셋업.

본문

create-next-app 실행

BASH📋 코드 (8줄)

pnpm create next-app@latest my-saas
# ✓ TypeScript? Yes
# ✓ ESLint? Yes
# ✓ Tailwind CSS? Yes
# ✓ src/ directory? Yes
# ✓ App Router? Yes
# ✓ Turbopack? Yes
# ✓ import alias? Yes (@/*)

폴더 구조 (마스터 표준)

📋 코드 (40줄)

my-saas/
├── src/
│   ├── app/
│   │   ├── (marketing)/        # 랜딩·요금
│   │   │   ├── page.tsx
│   │   │   └── pricing/page.tsx
│   │   ├── (auth)/             # 로그인
│   │   │   ├── login/page.tsx
│   │   │   └── signup/page.tsx
│   │   ├── (app)/              # 인증 필요
│   │   │   ├── dashboard/page.tsx
│   │   │   ├── generate/page.tsx
│   │   │   └── settings/page.tsx
│   │   ├── api/
│   │   │   ├── generate/route.ts
│   │   │   └── webhooks/stripe/route.ts
│   │   └── layout.tsx
│   ├── components/
│   │   ├── ui/                 # shadcn/ui
│   │   ├── marketing/
│   │   └── app/
│   ├── lib/
│   │   ├── supabase/
│   │   │   ├── client.ts
│   │   │   ├── server.ts
│   │   │   └── middleware.ts
│   │   ├── stripe.ts
│   │   ├── ai.ts
│   │   └── utils.ts
│   ├── hooks/
│   │   └── use-user.ts
│   ├── types/
│   │   └── database.ts         # Supabase 자동 생성
│   └── middleware.ts
├── public/
├── .env.example
├── next.config.ts
├── tailwind.config.ts
├── tsconfig.json
└── package.json

TypeScript strict 설정

JSON📋 코드 (11줄)

// tsconfig.json
{
  "compilerOptions": {
    "strict": true,
    "noUncheckedIndexedAccess": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "forceConsistentCasingInFileNames": true,
    "skipLibCheck": true
  }
}

핵심 패키지 설치

BASH📋 코드 (21줄)

# UI
pnpm add @radix-ui/react-* lucide-react clsx tailwind-merge
pnpm add framer-motion

# State
pnpm add @tanstack/react-query zustand

# Supabase
pnpm add @supabase/supabase-js @supabase/ssr

# AI
pnpm add ai @ai-sdk/openai @ai-sdk/anthropic

# Stripe
pnpm add stripe @stripe/stripe-js

# Forms
pnpm add react-hook-form zod @hookform/resolvers

# Dev
pnpm add -D @types/node prettier eslint-config-prettier

App Router Layout

TSX📋 코드 (20줄)

// src/app/layout.tsx
import type { Metadata } from 'next'
import { Inter } from 'next/font/google'
import './globals.css'

const inter = Inter({ subsets: ['latin'] })

export const metadata: Metadata = {
  metadataBase: new URL('https://mysaas.com'),
  title: { template: '%s | My SaaS', default: 'My SaaS' },
  description: 'AI 글쓰기 SaaS',
}

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="ko" suppressHydrationWarning>
      <body className={inter.className}>{children}</body>
    </html>
  )
}

Server Component vs Client Component

TSX📋 코드 (20줄)

// 서버 (기본) — DB 조회·SEO
// src/app/(app)/dashboard/page.tsx
import { createClient } from '@/lib/supabase/server'

export default async function DashboardPage() {
  const supabase = await createClient()
  const { data: gens } = await supabase
    .from('generations')
    .select('*')
    .order('created_at', { ascending: false })
    .limit(10)

  return <DashboardClient initialData={gens} />
}

// 클라이언트 — 상태·인터랙션
// src/components/app/DashboardClient.tsx
'use client'
import { useState } from 'react'
export function DashboardClient({ initialData }) { ... }

개발 서버 실행

BASH📋 코드 (4줄)

pnpm dev          # http://localhost:3000 (Turbopack)
pnpm build        # 프로덕션 빌드
pnpm lint         # ESLint
pnpm typecheck    # tsc --noEmit

다음 챕터

CH.11 "Tailwind + 디자인 토큰".

AI 프롬프트

🤖 AI에게 잘 물어보는 법 — 모델·전략별 프롬프트

Claude

무료: Sonnet 4.6 / Pro $20/mo: Opus 4.6

내 마스터 프로젝트의 Next.js 프로젝트 초기화 부분을 분석해서
실전 적용 + 개선 우선순위 3가지를 알려줘.

ChatGPT

무료: GPT-5.5 / Plus $20/mo: GPT-5.5 Pro

Next.js 프로젝트 초기화 관련 모범 사례·안티패턴 5개를
비교 분석해서 실전 적용를 위한 추천 방안을 알려줘.

Gemini

무료: 2.5 Flash / Pro $19.99/mo: 3.1 Pro

내 프로젝트 전체에서 Next.js 프로젝트 초기화
최적화 가능 위치와 리스크를 보고해줘.

Grok

무료: Grok 4.1 / SuperGrok $30/mo

2026년 한국 1인 개발자 시장의
Next.js 프로젝트 초기화 트렌드와 차별화 포인트를 정리해줘.

⭐ 이것만 기억하세요

Next.js 프로젝트 초기화: App Router + TypeScript는 이 3가지만 확실히 잡으세요

1.Next.js 16 + App Router + TypeScript strict 표준

2.(marketing)/(auth)/(app) 라우트 그룹 = 인증 분리

3.다음 챕터에서 Tailwind + 디자인 토큰

💬 이 챕터 질문 보기

MASTER-PROJECT · CH.10 — 질문하거나 답변을 확인하세요

→

진행도 10 / 50

← 커리큘럼으로 ← 목록으로 (master-project)