시작하기
새 프로젝트 시작
TanStack Builder 사용
TanStack Start를 시작하는 가장 좋은 방법은 TanStack Builder입니다. 이는 AI 우선 설정 흐름이며, 작동하는 프로젝트로 빠르게 가는 가장 쉬운 방법입니다.
CLI 사용
로컬에서 스캐폴딩하거나 대체 경로가 필요하다면 TanStack CLI를 사용합니다:
npx @tanstack/cli@latest create
패키지 관리자와 Tailwind CSS, ESLint 같은 선택적 추가 항목을 선택하라는 안내를 받게 됩니다.
예제에서 시작
작동하는 코드베이스에서 시작하고 싶다면 공식 예제 중 하나를 복제합니다.
Basic 예제로 시작하려면:
npx gitpick TanStack/router/tree/main/examples/react/start-basic start-basic
cd start-basic
npm install
npm run dev
다른 예제를 사용하려면 아래의 start-basic를 원하는 슬러그로 바꿉니다.
예제
- Basic (
start-basic) - Basic + Rsbuild (
start-basic-rsbuild) - Basic + Auth (
start-basic-auth) - Counter (
start-counter) - Basic + React Query (
start-basic-react-query) - Clerk Auth (
start-clerk-basic) - Convex + Trellaux (
start-convex-trellaux) - Supabase (
start-supabase-basic) - Trellaux (
start-trellaux) - WorkOS (
start-workos) - Material UI (
start-material-ui)
각 예제 페이지에는 StackBlitz 미리보기도 포함되어 있어 복제하기 전에 검토할 수 있습니다.
다른 예제를 수동으로 복제하려면 아래의 EXAMPLE_SLUG를 사용하려는 슬러그로 바꿉니다:
npx gitpick TanStack/router/tree/main/examples/react/EXAMPLE_SLUG my-new-project
cd my-new-project
npm install
npm run dev
빠르게 복제하고 배포하고 싶다면 예제 페이지의 Netlify에 배포 버튼을 사용합니다.
처음부터 빌드
모든 것을 직접 구성하고 싶다면 처음부터 프로젝트 빌드를 따릅니다.
기존 프로젝트를 다른 프레임워크에서 마이그레이션
- Start를 처음부터 깨끗한 상태로 배우고 싶다면 위의 새 프로젝트 옵션 중 하나를 사용합니다.
- 사용 중인 프레임워크에 맞는 마이그레이션 가이드를 참고합니다:
- Next.js
- Remix 2 / React Router 7 "Framework Mode" (곧 제공됩니다!)
다음 단계
프로젝트를 생성, 복제, 배포했다면 Routing 가이드를 계속 진행합니다.
기타 Router 예제
Start 전용이 아닌 Router 중심 예제를 원한다면 다음이 유용한 참고 자료입니다: