Next.js 連携

非公式ベータ版翻訳

このページは PageTurner AI で翻訳されました（ベータ版）。プロジェクト公式の承認はありません。 エラーを見つけましたか？ 問題を報告 →

tRPC ❤️ Next.js

Next.js を使えば、クライアントとサーバーを単一のコードベースで簡単に構築できます。tRPC は両者の間で型を共有しやすくし、アプリケーションのデータ取得における型安全性を保証します。

当社の Next.js 連携は React Query 連携 を基盤として構築されており、Next.js 固有の API を追加することでクライアントサイドレンダリングとサーバーサイドレンダリングの両方を処理します。

Next.js 連携を使用すると、以下の機能を利用できます：

• サーバーサイドレンダリング - tRPC にページをサーバーでレンダリングさせ、クライアントでハイドレートできます。これにより初期ローディング状態を回避できますが、最初のバイトまでの時間はサーバー処理に依存します。詳細は サーバーサイドレンダリング をご覧ください。

• 静的サイト生成 - サーバー上でクエリをプリフェッチし、すぐに提供可能な静的 HTML ファイルを生成します。詳細は 静的サイト生成 をご覧ください。

• 自動プロバイダーラッピング - @trpc/next は高階コンポーネント (HOC) を提供し、必要なプロバイダーでアプリを自動的にラップするため、手動での設定が不要です。

ヒント

新規プロジェクトで tRPC を使用する場合は、参考としてサンプルプロジェクトの利用を検討してください: tRPC サンプルプロジェクト