Next.js連携

tRPC ❤️ Next.js

Next.jsを使うと、クライアントとサーバーを1つのコードベースで簡単に構築できます。tRPCを使うと、それらの間で型を簡単に共有でき、アプリケーションのデータフェッチングの型安全性を確保できます。

Next.jsとの連携は、クライアントとサーバーサイドの両方のレンダリングを処理するために、いくつかのNext.js固有のAPIを備えたReact Query連携の上に構築されています。

Next.js連携を使用すると、次の機能が利用できます。

• サーバーサイドレンダリング - サーバーでページをレンダリングし、クライアントでそれらをハイドレートするようにtRPCに指示できます。これにより、最初の読み込み状態を回避できますが、最初のバイトまでの時間はサーバーによってブロックされます。 サーバーサイドレンダリングについて詳しくはこちらをご覧ください。
• 静的サイト生成 - サーバーでクエリをプリフェッチし、提供準備の整った静的HTMLファイルを生成します。静的サイト生成について詳しくはこちらをご覧ください。
• 自動プロバイダーのラッピング - @trpc/nextは、必要なプロバイダーでアプリをラップする高階コンポーネント（HOC）を提供するため、自分でそれを行う必要はありません。

ヒント

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