Next.jsでtRPCを使ってAPIを型安全にする
この記事について
この記事ではNext.jsでtRPCを使ってAPIを型安全にする方法について紹介します。記事の内容はtRPC公式ドキュメントのUsage with Next.jsに基づいていますが、簡略化するために推奨ディレクトリ構造（Recommended file structure）など一部の手順を省略しています。
使用するtRPCのバージョンはv10です。v10はこの記事を投稿する2022年9月23日時点ではbetaなのでAPIが変更される可能性があるのでご留意ください。
コーディングの準備
ターミナルで下記のコマンドを実行してコーディングの準備をします。
npx create-next-app --typescript next-trpc
cd next-trpc
npm install --save
@trpc/server@next \
@trpc/client@next \
@trpc/react@next \
@trpc/next@next \
@tanstack/react-query \
zod
touch pages/client.tsx
mkdir pages/api/trpc
touch pages/api/trpc/[trpc].ts
mkdir utils
touch utils/trpc.ts
コーディング
エディタで下記のファイルを開いて内容を入力します。
pages/api/trpc/[trpc].ts
utils/trpc.ts
pages/_app.tsx
pages/client.tsx
動作確認
ターミナルで下記のコマンドを実行してサーバーを起動します。
npm run dev
ブラウザで http://localhost:3000/ にアクセスして下記の内容が表示されることを確認します。
Hello tRPC
参考にしたWebページ
tRPCの先人たちの記事へのリンクを自分の備忘も兼ねて下記に示します。
おわりに
tRPCについてはMikihiro Saitoさんが投稿した下記の記事ではじめて知りました。
tRPCを使うことでAPI入出力の型情報をフロントエンド側に簡単に伝えることができます。これにより、フロントエンド側のコーディングでコード補完やエラーメッセージ表示がバシバシ効くようになるのでとても快適です。
GraphQLとの比較
GraphQLでもCode Generatorを使ってスキーマからTypeScriptコードを自動生成することでAPI入出力の型情報をフロントエンド側に伝えることができますが、tRPCではコード生成なしで同じことができるので魅力的に感じます。コード生成に関する設定を行う必要がないのも手間を省けるので地味に嬉しいです。ちなみにGraphQLでスキーマからTypeScriptコードを自動生成する方法については下記の記事で紹介していますが、見比べるとtRPCの方が圧倒的にシンプルです。
Next.jsとApolloとNexus.jsとGraphQL Code Generatorをつなげる
GraphQLもtRPCもまだ触れたばかりなのでメリット／デメリットをよく理解していませんが、APIを型安全にしたいだけならtRPCを使った方が楽だと感じました。一方でGraphQLのクライアント側でクエリを記述できる点はtRPCにはない魅力なので、クライアントから必要なデータを1回のクエリで取得したい場合はGraphQLの方が適していると思いました。
最後になりますがis_ryoさんが投稿したtrpcって知ってますか？というタイトルの記事の中でclient - (GraphQL) - BFF - (gRPC) - MicroServiceという記述があり、tRPCとGraphQLの使い分けにあたって参考になったので下記に図示します。
Discussion