NextStarter

Next.js 16 App Router 기반 프로덕션 레디 웹 개발 스타터킷. 반응형 레이아웃, 테마 시스템, 인증 폼, UI 컴포넌트를 포함하여 즉시 개발을 시작할 수 있습니다.

주요 기능

• ✅ Next.js 16 App Router — Pages Router 없이 App Router 전용
• ✅ TypeScript 5 strict 모드 — 완전한 타입 안전성
• ✅ Tailwind CSS 4 — CSS 변수 + OKLCH 색상 토큰
• ✅ shadcn/ui — Radix UI 기반 접근성 컴포넌트 (radix-nova 스타일)
• ✅ 다크/라이트/시스템 테마 — next-themes 기반 전환
• ✅ 반응형 헤더 — 데스크톱 네비 + 모바일 드로어
• ✅ 로그인 페이지 — 이메일/비밀번호 폼 (비밀번호 표시 토글)
• ✅ 토스트 알림 — Sonner 기반
• ✅ 전역 로딩/404 UI — Skeleton 로더 + 커스텀 404
• ✅ 커스텀 폰트 — Geist (Google Fonts)
• ✅ ESLint 설정 — Next.js 권장 설정 적용

기술 스택

라이브러리	버전	설명
Next.js	16.2.6	App Router 기반 풀스택 프레임워크
React	19.2.4	UI 라이브러리
TypeScript	^5	정적 타입 검사 (strict 모드)
Tailwind CSS	^4	CSS 변수 기반 유틸리티 퍼스트 스타일링
shadcn/ui	^4.7.0	Radix UI 기반 접근성 컴포넌트
Lucide React	^1.14.0	1500+ 오픈소스 아이콘
next-themes	^0.4.6	라이트/다크/시스템 테마 지원
Sonner	^2.0.7	토스트 알림
usehooks-ts	^3.1.1	TypeScript React 훅 모음

시작하기

Prerequisites: Node.js 18 이상

# 의존성 설치
npm install

# 개발 서버 실행
npm run dev

브라우저에서 http://localhost:3000을 열어 확인합니다.

개발 명령어

npm run dev      # 개발 서버 실행
npm run build    # 프로덕션 빌드
npm run start    # 프로덕션 서버 실행
npm run lint     # ESLint 검사

프로젝트 구조

app/
  layout.tsx       # 전역 레이아웃 (ThemeProvider, Header, Footer, Toaster)
  page.tsx         # 랜딩 페이지 (HeroSection, FeaturesSection, CTASection)
  loading.tsx      # 전역 로딩 UI (Skeleton)
  not-found.tsx    # 404 페이지
  login/
    page.tsx       # 로그인 페이지
components/
  layout/          # Header (반응형 + 모바일 드로어), Footer
  providers/       # ThemeProvider (next-themes 래퍼)
  theme/           # ThemeToggle (라이트/다크/시스템 전환)
  auth/            # LoginForm 등 인증 관련 컴포넌트
  ui/              # shadcn/ui 컴포넌트 (직접 수정 가능)
lib/
  constants.ts     # SITE_CONFIG, NAV_LINKS, FOOTER_LINKS, FEATURES
  utils.ts         # cn() 유틸리티 (clsx + tailwind-merge)

커스터마이징

shadcn/ui 컴포넌트 추가

npx shadcn add <component>

추가된 컴포넌트는 components/ui/에 생성되며 직접 수정 가능합니다.

사이트 설정 변경

lib/constants.ts에서 다음 상수를 수정합니다.

// 사이트 메타 정보
export const SITE_CONFIG = {
  name: "NextStarter",
  description: "...",
  url: "https://example.com",
  github: "https://github.com",
};

// 네비게이션 링크
export const NAV_LINKS = [...];

// 푸터 링크
export const FOOTER_LINKS = { ... };

// 랜딩 기능 카드
export const FEATURES = [...];

테마 색상 변경

app/globals.css의 CSS 변수(OKLCH 형식)를 수정합니다.

:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --primary: oklch(0.205 0 0);
  /* ... */
}

배포

Vercel에 배포하는 것을 권장합니다. GitHub 저장소를 연결하면 자동 배포됩니다.

일반 환경에서는 다음 순서로 실행합니다.

npm run build
npm run start