왜 AI를 Next.js하는가?
Next.js AI 앱의 완벽한 기반을 제공합니다: SEO를 위한 서버 측 렌더링, 백엔드 로직을 위한 API 경로, 실시간 응답을 위한 스트리밍 지원.
준비 중
- Vercel AI SDK 설치: 'npm install ai @ai-sdk/openai'
- 'app/api/chat/route.ts'에서 API 경로를 생성하기
- 실시간 토큰 스트리밍을 위해 'streamText' 헬퍼를 사용하세요.
핵심 패턴
### 스트리밍 채팅
클라이언트 측의 'useChat' 훅을 사용하세요. 스트리밍, 메시지 상태, 그리고 자동 중재를 처리합니다.
### RAG 통합
- 문서를 벡터 데이터베이스(Pinecone, Qdrant, pgvector)에 저장합니다.
- 사용자 쿼리 시 관련 청크를 가져옵니다.
- 시스템 프롬프트에 맥락으로 청크를 포함합니다.
### 이미지 생성
- DALL-E 또는 안정 확산 API를 사용하세요.
- 낙관적인 UI 업데이트와 함께 로딩 상태를 표시합니다.
공연 팁
- Edge 런타임: 지연 시간을 줄이기 위해 API 경로를 엣지로 배포합니다.
- 캐싱: 캐시 임베딩 및 공통 응답.
- 배치: 가능할 경우 여러 API 호출을 그룹화합니다.
배치
- Vercel에서 자동 엣지 배치를 위해 배포.
- API 키에 환경 변수를 사용하세요.
- 비용 통제를 위한 속도 제한 설정.