ai-startup
CHAPTER 26 / 100
읽기 약 2분
FUNCTION
AI SaaS 아키텍처: Next.js + Supabase + AI API
핵심 개념
풀스택 AI 서비스 표준 구조·데이터 흐름·확장성 — 검증된 조합.
본문
검증된 AI SaaS 스택
[Frontend]
- Next.js 16 App Router
- Tailwind + shadcn/ui
- TanStack Query
[Backend]
- Next.js API Routes (또는 별도 Express)
- Vercel AI SDK (스트리밍·도구 호출)
[Database + Auth]
- Supabase (PostgreSQL + Auth + RLS)
- 또는 Clerk + 자체 DB
[AI Models]
- OpenAI / Anthropic / Google Gemini
- 모델별 라우팅 (비용 vs 품질)
[Payments]
- Stripe (구독)
- 토스페이먼츠 (한국)
[Storage]
- Supabase Storage 또는 Cloudflare R2데이터 흐름
사용자 → Next.js (Server Component)
↓
Supabase Auth (세션 검증)
↓
Rate Limit 체크 (Redis/Upstash)
↓
AI API 호출 (Vercel AI SDK)
↓
Stream → 클라이언트
↓
DB 저장 + 토큰 사용량 기록폴더 구조
my-ai-saas/
├── app/
│ ├── (marketing)/
│ ├── (auth)/
│ ├── (app)/
│ │ ├── chat/page.tsx
│ │ ├── settings/
│ │ └── billing/
│ ├── api/
│ │ ├── chat/route.ts
│ │ ├── webhooks/stripe/
│ │ └── usage/
├── components/
│ ├── ui/ (shadcn)
│ ├── chat/
│ └── shared/
├── lib/
│ ├── supabase/
│ ├── stripe.ts
│ ├── ai.ts
│ └── ratelimit.ts
└── prisma/schema.prisma핵심 의존성
pnpm add next@latest react@latest typescript
pnpm add @supabase/supabase-js @supabase/ssr
pnpm add ai @ai-sdk/openai @ai-sdk/anthropic @ai-sdk/google
pnpm add @upstash/redis @upstash/ratelimit
pnpm add stripe @stripe/stripe-js
pnpm add @tanstack/react-query zustand
pnpm add tailwindcss @tailwindcss/forms다음 챕터
CH.27 "사용자 인증: Supabase Auth + 소셜 로그인".
AI 프롬프트
🤖 AI에게 잘 물어보는 법 — 모델·전략별 프롬프트
무료
월 $0 — 검증·시작 단계
AI SaaS 아키텍처을 무료 도구만으로 시작하는 방법을 알려줘.
소자본
월 $20~50 — MVP·초기 운영
월 $20~50 예산으로 AI SaaS 아키텍처을 검증·MVP 단계까지 진행하는 전략은?
프로덕션
월 $200~500 — 성장 단계
AI SaaS 아키텍처을 프로덕션 단계로 확장할 때 필요한 도구·운영 체계는?
스택
풀스택 — 도구 조합 분석
2026년 AI SaaS 아키텍처 관련 도구 5개를 조합한 추천 스택을 알려줘.
⭐ 이것만 기억하세요
AI SaaS 아키텍처: Next.js + Supabase + AI API는 이 3가지만 확실히 잡으세요
1.Next.js + Supabase + Vercel AI SDK = 검증된 AI SaaS 스택
2.데이터 흐름 5단계 — Auth · Rate Limit · AI · Stream · 사용량 기록
3.월 $0~20에서 시작 가능 — 모두 무료 tier
공유하기
진행도 26 / 100