OSS探訪概要
tRPCは、TypeScriptで定義したサーバー側のRouterとProcedureから、クライアントの入力・出力・エラー型まで推論するRPCフレームワークです。別のスキーマ生成やコード生成を挟まず、フロントエンドとバックエンドの型を揃えられます。
特徴と向いている用途
公式資料に基づく紹介・実機未検証 · 内容確認日：
RouterとProcedureからクライアント型を推論する
サーバーのProcedureに入力検証と処理を定義し、その型情報だけをクライアントへ共有して補完と静的検査を効かせられます。
Reactや各種HTTPサーバーへ接続する
React Queryとの統合に加え、Next.js、Express、Fastify、Fetch APIなどのアダプターを使って既存アプリへ組み込めます。
TypeScriptでフロントとバックを一体管理する場合に
同じチームがTypeScriptのフロントエンドとAPIを開発し、API変更を型エラーとして早い段階で検知したい構成に向きます。
出典：[2]
外部公開APIでは契約の境界を別途考える
tRPCの中心はTypeScript型の共有です。多言語クライアントや第三者向けAPIでは、OpenAPIなど別の契約形式が必要かを設計段階で確認します。
出典：[3]
参考にした公式資料
- [1]trpc/trpc repository(2026-09-21)
- [2]tRPC README(2026-09-21)
- [3]tRPC documentation(2026-09-21)
- [4]@trpc/server package(2026-09-21)
- [5]tRPC MIT license(2026-09-21)
編集部からの補足
tRPCはRESTやOpenAPIのような言語非依存の契約を先に定義する方式ではなく、TypeScriptのサーバー型をクライアントへ伝播させる設計です。同じTypeScriptコードベースや密接に管理できるフロント・バックエンドでは強力ですが、外部公開APIや多言語クライアントが中心なら契約の配布方法を別途検討してください。現在の`@trpc/server`は11.19.0です。
3ステップで試す
- 1
公式Next.jsサンプルからプロジェクトを作成
READMEにあるNext.js + Prismaのサンプルを使い、tRPCのRouter・クライアント・型共有が揃った構成を作成します。
npx create-next-app --example https://github.com/trpc/trpc --example-path examples/next-prisma-starter trpc-prisma-starter - 2
開発サーバーを起動
ブラウザでアプリを開き、サーバー側Procedureとクライアント呼び出しがつながっていることを確認します。
cd trpc-prisma-starter && npm run dev - 3
Procedureを一つ追加して型伝播を確認
入力または返却型を変更し、クライアント側の補完・型エラーへ即座に反映されるtRPCの基本体験を確認します。
Add a router procedure → call it from the client
成長
成長の推移 · 直近30日
40,630 Stars
推移データを蓄積中です。
開発アクティビティ
直近90日・週次
- Commit（直近30日）
- 33
- Open PR
- 56
開発アクティビティを蓄積中です。
Built with
カテゴリとタグ
GitHubデータ
関連情報
関連記事を投稿するこのOSSの使い方や活用事例をMarkdownで投稿できます。管理者が承認した後に公開されます。
あわせて探訪
- Cal.diy48,583 Stars
共通タグ 5件 · 同じ言語
Cal.comのEnterprise codeを除き、MITでself-hostできるcommunity scheduling platform。
TypeScript - Linkwarden19,816 Stars
共通タグ 4件 · 同じ言語
bookmarkをScreenshot/PDF/HTMLで保存し、全文検索・annotation・collaborationまで扱えるself-host型knowledge archive。
TypeScript - Plasmic7,030 Stars
共通タグ 3件 · 共通カテゴリ 2件 · 同じ言語
既存Reactコンポーネントをドラッグ&ドロップで使いながら、Webサイト・アプリ・CMSコンテンツを視覚的に構築するビジュアルビルダー。
TypeScript - Medusa36,400 Stars
共通タグ 3件 · 共通カテゴリ 1件 · 同じ言語
Commerce module・workflow・APIを組み合わせてB2B/DTC/marketplaceを構築できるTypeScript製commerce platform。
TypeScript - Onlook26,774 Stars
共通タグ 3件 · 共通カテゴリ 1件 · 同じ言語
Next.js + Tailwindの実コードをFigma風UIとAIから直接編集し、デザインとコードを同じ画面で往復できるビジュアルエディタ。
TypeScript
情報の誤りを報告
掲載内容に誤りや古い情報があればお知らせください。