Next.js インテグレーション
このページは PageTurner AI で翻訳されました（ベータ版）。プロジェクト公式の承認はありません。 エラーを見つけましたか？ 問題を報告 →
tRPC + Next.js
Next.js を使えば、クライアントとサーバーを単一のコードベースで簡単に構築できます。tRPC は両者の間で型を共有しやすくし、アプリケーションのデータ取得における型安全性を保証します。
tRPC は App Router と Pages Router の両方をファーストクラスでサポートしています。プロジェクトに合ったガイドを選択してください：
App Router
新規 Next.js プロジェクトでの推奨アプローチです。React Server Components、fetch アダプター、@trpc/tanstack-react-query を使用します。
主な機能：
-
Server Components - サーバー上でデータをプリフェッチしクライアントにストリーム
-
ストリーミング - Next.js のストリーミング機能を活用した最適な読み込みパフォーマンス
-
Suspense -
useSuspenseQueryと Suspense 境界を使用したローディング状態の管理
Pages Router
Pages Router のデータ取得パターン向けに高階コンポーネント（HOC）と統合フックを提供する @trpc/next を使用します。
主な機能：
-
サーバーサイドレンダリング - サーバー上でページをレンダリングしクライアントでハイドレート。SSR 詳細
-
静的サイト生成 - サーバー上でクエリをプリフェッチし静的 HTML ファイルを生成。SSG 詳細
-
自動プロバイダーラッピング -
@trpc/nextが必要なプロバイダーでアプリを自動的にラップ
App Router と Pages Router の選択
| App Router | Pages Router | |
|---|---|---|
| Recommended for | New projects | Existing Pages Router projects |
| Data fetching | Server Components, prefetchQuery | getServerSideProps, getStaticProps, SSR via HOC |
| Server adapter | Fetch adapter | Next.js adapter |
| Client package | @trpc/tanstack-react-query | @trpc/next + @trpc/react-query |
| Provider setup | Manual QueryClientProvider + TRPCProvider | Automatic via withTRPC() HOC |
新規プロジェクトの場合は App Router を推奨します。既存の Pages Router プロジェクトがある場合、Pages Router のインテグレーションは十分に機能し完全にサポートされています。