tRPCとは？

tRPCは、クライアントとサーバー間で型安全なAPI通信を実現するライブラリです。特にTypeScriptとの相性が良く、スキーマ定義が不要なため、型定義を共有しながらシンプルにフルスタック開発を進められます。Next.jsとtRPCを組み合わせることで、APIの開発が非常に効率的になります。

tRPCのセットアップ

tRPCをNext.jsに導入する手順は次の通りです。 まず、必要なパッケージをインストールします。

npm install @trpc/server @trpc/client @trpc/react-query zod

@trpc/serverはサーバー側でのtRPC API定義、@trpc/clientはクライアント側でAPI通信を行うためのライブラリです。zodはバリデーションスキーマのために使用します。 次に、サーバー側の設定を行います。pages/api/trpc/[trpc].tsを作成し、APIハンドラを定義します。

import * as trpcNext from '@trpc/server/adapters/next';
import { appRouter } from '../../../server/routers/_app';
export default trpcNext.createNextApiHandler({
  router: appRouter,
  createContext: () => ({}),
});

このappRouterでは、リクエストを処理するルートやプロシージャを定義します。

import { z } from 'zod';
import { procedure, router } from '../trpc';
export const appRouter = router({
  hello: procedure
    .input(z.object({ text: z.string() }))
    .query(({ input }) => {
      return { greeting: `Hello, ${input.text}` };
    }),
});
export type AppRouter = typeof appRouter;

クライアント側の設定

クライアント側では、tRPCのフックを利用してAPIと通信します。utils/trpc.tsを作成し、tRPCクライアントを初期化します。

import { httpBatchLink } from '@trpc/client';
import { createTRPCNext } from '@trpc/next';
import type { AppRouter } from '../server/routers/_app';
export const trpc = createTRPCNext<AppRouter>({
  config() {
    return {
      links: [
        httpBatchLink({
          url: '/api/trpc',
        }),
      ],
    };
  },
  ssr: true,
});

これで、useQueryやuseMutationなどのフックを使ってAPIからデータを取得したり、ミューテーションを行うことができます。

サーバーサイドレンダリング(SSR)の設定

SSRを利用する場合は、tRPCのcreateTRPCNext関数でSSRを有効にする必要があります。これにより、ページがサーバーサイドでレンダリングされる際にtRPCを介してデータをフェッチできます。 例えば、getServerSideProps内で次のようにtRPCクエリを実行できます。

export const getServerSideProps = async () => {
  const trpc = createTRPCNext<AppRouter>();
  const data = await trpc.hello.query({ text: 'world' });
  return { props: { data } };
};

まとめ

Next.jsとtRPCを組み合わせることで、クライアントとサーバー間で型安全なデータ通信を簡単に実現できます。tRPCは、RESTやGraphQLのようなスキーマ定義が不要で、TypeScriptによる型チェックを最大限に活用できるため、効率的なフルスタック開発が可能です。さらに、SSRやSSGにも対応しており、柔軟な開発が可能です。 この導入方法を参考に、Next.jsアプリケーションでのtRPC活用を始めてみてください。