본문으로 건너뛰기
버전: 11.x

예제 앱

공식​

Node.js​

예제설명링크
최소 구성Hello world 서버 및 클라이언트소스 · CodeSandbox
독립 서버WebSocket 지원 커스텀 HTTP 서버소스 · CodeSandbox
콘텐츠 타입바이너리, 텍스트, JSON 콘텐츠 타입 처리소스 · CodeSandbox
레이지 로딩동적 임포트를 사용한 레이지 로딩 라우트소스 · CodeSandbox
SOA여러 tRPC 서비스를 사용한 서비스 지향 아키텍처소스 · CodeSandbox
OpenAPI 코드 생성OpenAPI를 통해 tRPC 라우터에서 타입화된 REST 클라이언트 생성소스
키친 싱크다양한 기능을 포괄하는 종합 예제소스 · CodeSandbox

React​

예제설명링크
최소 ReactNode.js 서버 + Vite React 클라이언트 모노레포소스 · CodeSandbox
Express + ReactReact Query를 사용하는 React 클라이언트와 Express 서버소스 · CodeSandbox

Next.js​

예제설명링크
Prisma 스타터Prisma, E2E 테스트, ESLint, Tailwind CSS를 사용한 풀스택소스 · 데모 · CodeSandbox
최소 스타터최소한의 Next.js + tRPC 설정소스 · CodeSandbox
TodoMVCSSG와 Prisma를 사용한 TodoMVC소스 · 데모 · CodeSandbox
WebSocketsPrisma, WebSockets, NextAuth, 구독소스 · 데모 · CodeSandbox
SSE 채팅Server-Sent Events와 Drizzle ORM을 사용한 스트리밍 채팅소스 · CodeSandbox
큰 라우터코드 생성을 사용한 대형 라우터소스 · CodeSandbox
Edge RuntimeNext.js Edge Runtime에서 tRPC소스 · CodeSandbox
FormDataReact Hook Form과 Zod를 사용한 폼 처리소스 · CodeSandbox
WebSocket 인코더MessagePack 바이너리 인코딩을 사용한 WebSockets소스 · CodeSandbox

서버리스​

예제설명링크
Lambda + API GatewayAPI Gateway와 AWS Lambda소스 · CodeSandbox
Lambda 스트리밍스트리밍 응답을 지원하는 AWS Lambda + API Gateway소스 · CodeSandbox
Lambda Function URLsFunction URLs와 AWS Lambda소스 · CodeSandbox
Cloudflare WorkersCloudflare Workers에서 tRPC소스 · CodeSandbox
Vercel Edge RuntimeVercel Edge Runtime에서 tRPC 사용소스 · CodeSandbox
Deno DeployDeno Deploy에서 tRPC 클라이언트 사용소스 · CodeSandbox

기타 생태계​

예제설명링크
Express최소한의 Express + tRPC 설정소스 · CodeSandbox
FastifyWebSocket 지원이 포함된 Fastify소스 · CodeSandbox
BunBun에서 tRPC 서버 및 클라이언트소스 · CodeSandbox
Nuxt 3trpc-nuxt를 사용한 Nuxt 3 통합소스 · CodeSandbox

커뮤니티​

노트

커뮤니티 예제는 각 저자가 관리하며 최신 tRPC 버전으로 업데이트되지 않을 수 있습니다. 버전 호환성을 확인하려면 각 프로젝트의 README를 참조하세요.

프레임워크​

예제설명링크
create-t3-turboExpo와 Turborepo가 포함된 T3 Stack소스 · CodeSandbox
SvelteKit + PrismaPrisma가 포함된 SvelteKit 통합소스 · CodeSandbox

통합​

예제설명링크
Separate BE/FE백엔드와 프론트엔드 리포지토리 분리백엔드 (Express) · 프론트엔드 (Vite)