mcpField
T
trpc-tanstack-nextjs

trpc-tanstack-nextjs

github.com/diegojohnsonl開発1128 回インストール41 週間前に更新
リポジトリ

trpc-tanstack-nextjs について

trpc-tanstack-nextjsは、tRPC v11、TanStack Query、Next.js App Routerを使ったエンドツーエンドの型安全API構築を案内するスキルです。セットアップ、クライアントとサーバーでの利用、任意の連携を個別のガイドと例で説明します。

主な機能

  1. 01tRPCの一通りのセットアップを案内
  2. 02ルーター、プロシージャ、ミドルウェアを解説
  3. 03クライアントのクエリとミューテーションを説明
  4. 04サーバーでのプリフェッチとハイドレーションを解説
  5. 05任意の認証とリアルタイム処理のパターンを収録

活用シーン

  1. 01Next.jsアプリで型安全APIをセットアップ
  2. 02クライアントコンポーネントでクエリとミューテーションを利用
  3. 03サーバーコンポーネントでデータをプリフェッチしてハイドレーション

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/diegojohnsonl/trpc-tanstack-nextjs --skill trpc-tanstack-nextjs

インストール後、Claude Code で/trpc-tanstack-nextjsを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

references/
better-auth-integration.md
client-usage.md
infinite-queries.md
optimistic-updates.md
routers.md
server-usage.md
setup.md
subscriptions.md

詳細

tRPC + TanStack Query + Next.js App Router

@trpc/tanstack-react-query アダプターで tRPC v11 を使用した、Next.js 向けのエンドツーエンド型安全 API です。

基本設定

  • setup - すべてのモジュールを含む、ゼロからの完全なセットアップ
  • routers - ルーター、プロシージャ、ミドルウェアの作成
  • client-usage - クライアントコンポーネントでのクエリ、ミューテーション、useUtils
  • server-usage - サーバーコンポーネントでのプリフェッチ、ハイドレーション、getCaller

オプションの統合

  • better-auth-integration - Better Auth で tRPC コンテキストにセッション／ユーザーを追加
  • optimistic-updates - サーバーでの確定前に UI を更新
  • infinite-queries - カーソルベースのページネーション
  • subscriptions - WebSocket によるリアルタイム更新

使用方法

詳しい説明とコード例については、各リファレンスファイルをお読みください。

references/setup.md
references/routers.md
references/client-usage.md

各リファレンスファイルには、以下が含まれています。

  • インポートを含むコード例
  • 使用パターン
  • よくあるバリエーション

よくある注意点

  1. Cookie が送信されない - httpBatchLink の fetch に credentials: "include" を追加します
  2. ハイドレーションの不一致 - クライアントとサーバーの両方で superjson トランスフォーマーが設定されていることを確認します
  3. staleTime: 0 - マウントのたびに再フェッチが発生します。ほとんどの場合、30 秒以上を使用します
  4. HydrateClient がない - プリフェッチされたデータがクライアントに転送されません
  5. cache() が使用されていない - getCaller/getQueryClient は React cache() でラップする必要があります

リソース

コメント

Markdown 対応