예제 애플리케이션

비공식 베타 번역

이 페이지는 PageTurner AI로 번역되었습니다(베타). 프로젝트 공식 승인을 받지 않았습니다. 오류를 발견하셨나요? 문제 신고 →

참고

예제 설치에는 여러 패키지 매니저를 사용할 수 있지만, 모든 예제는 스크립트 실행기로 pnpm을 사용하도록 구성되어 있습니다. 따라서 반드시 먼저 설치해 주세요.

npm이나 yarn을 사용하려면 생성된 예제의 관련 package.json scripts 항목을 업데이트해야 합니다.

---

Next.js 스타터 (Prisma, E2E 테스트, ESLint 포함) (권장)

npm

bash
npx create-next-app --example https://github.com/trpc/trpc --example-path examples/next-prisma-starter trpc-prisma-starter

bash
npx create-next-app --example https://github.com/trpc/trpc --example-path examples/next-prisma-starter trpc-prisma-starter

yarn

sh
yarn create next-app --example https://github.com/trpc/trpc --example-path examples/next-prisma-starter trpc-prisma-starter

sh
yarn create next-app --example https://github.com/trpc/trpc --example-path examples/next-prisma-starter trpc-prisma-starter

pnpm

sh
pnpx create-next-app --example https://github.com/trpc/trpc --example-path examples/next-prisma-starter trpc-prisma-starter

sh
pnpx create-next-app --example https://github.com/trpc/trpc --example-path examples/next-prisma-starter trpc-prisma-starter

bun

sh
bunx create-next-app --example https://github.com/trpc/trpc --example-path examples/next-prisma-starter trpc-prisma-starter

sh
bunx create-next-app --example https://github.com/trpc/trpc --example-path examples/next-prisma-starter trpc-prisma-starter

deno

sh
deno init --npm next-app --example https://github.com/trpc/trpc --example-path examples/next-prisma-starter trpc-prisma-starter

sh
deno init --npm next-app --example https://github.com/trpc/trpc --example-path examples/next-prisma-starter trpc-prisma-starter

• 배포 예시: nextjs.trpc.io

• 소스 코드

---

create-t3-turbo - Expo 및 Turborepo를 활용한 T3 스택

git

bash
git clone git@github.com:t3-oss/create-t3-turbo.git

bash
git clone git@github.com:t3-oss/create-t3-turbo.git

• 소스 코드

---

Next.js 스타터 (Prisma, E2E 테스트, ESLint, next-auth, WebSockets, 구독 기능 포함)

npm

bash
npx create-next-app --example https://github.com/trpc/trpc --example-path examples/next-prisma-websockets-starter trpc-prisma-websockets-starter

bash
npx create-next-app --example https://github.com/trpc/trpc --example-path examples/next-prisma-websockets-starter trpc-prisma-websockets-starter

yarn

sh
yarn create next-app --example https://github.com/trpc/trpc --example-path examples/next-prisma-websockets-starter trpc-prisma-websockets-starter

sh
yarn create next-app --example https://github.com/trpc/trpc --example-path examples/next-prisma-websockets-starter trpc-prisma-websockets-starter

pnpm

sh
pnpx create-next-app --example https://github.com/trpc/trpc --example-path examples/next-prisma-websockets-starter trpc-prisma-websockets-starter

sh
pnpx create-next-app --example https://github.com/trpc/trpc --example-path examples/next-prisma-websockets-starter trpc-prisma-websockets-starter

bun

sh
bunx create-next-app --example https://github.com/trpc/trpc --example-path examples/next-prisma-websockets-starter trpc-prisma-websockets-starter

sh
bunx create-next-app --example https://github.com/trpc/trpc --example-path examples/next-prisma-websockets-starter trpc-prisma-websockets-starter

deno

sh
deno init --npm create-next-app --example https://github.com/trpc/trpc --example-path examples/next-prisma-websockets-starter trpc-prisma-websockets-starter

sh
deno init --npm create-next-app --example https://github.com/trpc/trpc --example-path examples/next-prisma-websockets-starter trpc-prisma-websockets-starter

• 배포 예시: websockets.trpc.io

• CodeSandbox

• 소스 코드

---

Next.js Todo MVC 예제 (SSG 및 Prisma 적용)

npm

bash
npx create-next-app --example https://github.com/trpc/trpc --example-path examples/next-prisma-todomvc trpc-todo

bash
npx create-next-app --example https://github.com/trpc/trpc --example-path examples/next-prisma-todomvc trpc-todo

yarn

sh
yarn create next-app --example https://github.com/trpc/trpc --example-path examples/next-prisma-todomvc trpc-todo

sh
yarn create next-app --example https://github.com/trpc/trpc --example-path examples/next-prisma-todomvc trpc-todo

pnpm

sh
pnpx create-next-app --example https://github.com/trpc/trpc --example-path examples/next-prisma-todomvc trpc-todo

sh
pnpx create-next-app --example https://github.com/trpc/trpc --example-path examples/next-prisma-todomvc trpc-todo

bun

sh
bunx create-next-app --example https://github.com/trpc/trpc --example-path examples/next-prisma-todomvc trpc-todo

sh
bunx create-next-app --example https://github.com/trpc/trpc --example-path examples/next-prisma-todomvc trpc-todo

deno

sh
deno init --npm next-app --example https://github.com/trpc/trpc --example-path examples/next-prisma-todomvc trpc-todo

sh
deno init --npm next-app --example https://github.com/trpc/trpc --example-path examples/next-prisma-todomvc trpc-todo

• 배포 예시: todomvc.trpc.io

• CodeSandbox

• 소스 코드

---

최소 구성 (Hello world) Node.js 서버 및 클라이언트

• 소스 코드

---

순수 독립 실행형 서버 및 Node.js 프로시저 호출

• CodeSandbox

• 소스 코드

---

Express 서버 및 Node.js 프로시저 호출

• CodeSandbox

• 소스 코드

---

WebSockets 지원 Fastify 서버 및 Node.js 프로시저 호출

• CodeSandbox

• 소스 코드

---

SvelteKit with Prisma

• CodeSandbox

• 소스 코드

---

TanStack Start (알파 버전)

• 소스 코드

---

Express 기반 Sign-In With Ethereum 인증

git

bash
git clone git@github.com:codingwithmanny/trpc-siwe-monorepo.git

bash
git clone git@github.com:codingwithmanny/trpc-siwe-monorepo.git

• 소스 코드

---

별도의 백엔드 & 프론트엔드 저장소

• 소스 코드 - 백엔드 저장소 (Express.js)

• 소스 코드 - 프론트엔드 저장소 (Vite)