Setting up tRPC

Installation

In order to set up tRPC in your project, you need to add the following dependencies to your project:

pnpm install @trpc/server @trpc/client @trpc/next @trpc/react-query @tanstack/react-query

Setting up tRPC in your project

There are two folders of note when it comes to tRPC in your project. These are:

server/: This folder contains the tRPC API routes. You will primarily work here to define your API procedures and handle requests.

trpc/: This folder is for tRPC configuration, including the setup of routers and context. Changes here are less frequent unless you're adding new procedures or modifying the configuration.

app/layout.tsx: In order to use tRPC in your project, you will need to add the TRPCReactProvider to your project. This is done in the app/layout.tsx file.

app/layout.tsx

  import { TRPCReactProvider } from "@/trpc/react";
 
  export default function RootLayout({
    children,
  }: {
    children: React.ReactNode;
  }) {
    return (
        <html lang="en">
          <body>
            <TRPCReactProvider>
              {children}
            </TRPCReactProvider>
          </body>
        </html>
    );
  }

app/api/trpc/[trpc]route.ts: This file is the entry point for tRPC. It is used to create the tRPC router and handle requests.

app/api/trpc/[trpc]route.ts

  import { fetchRequestHandler } from "@trpc/server/adapters/fetch";
  import { type NextRequest } from "next/server";
 
  import { env } from "@/env";
  import { appRouter } from "@/server/api/root";
  import { createTRPCContext } from "@/server/api/trpc";
 
  /**
   * This wraps the `createTRPCContext` helper and provides the required context for the tRPC API when
   * handling a HTTP request (e.g. when you make requests from Client Components).
   */
  const createContext = async (req: NextRequest) => {
    return createTRPCContext({
      headers: req.headers,
    });
  };
 
  const handler = (req: NextRequest) =>
    fetchRequestHandler({
      endpoint: "/api/trpc",
      req,
      router: appRouter,
      createContext: () => createContext(req),
      onError:
        env.NODE_ENV === "development"
          ? ({ path, error }) => {
              console.error(
                `❌ tRPC failed on ${path ?? "<no-path>"}: ${error.message}`
              );
            }
          : undefined,
    });
 
export { handler as GET, handler as POST };

This file uses a local env.js file to store your environment variables. So make sure to add that in your project. Here is an example of what the env file should look like.

tRPC shines by enabling you to create a router that links your frontend and backend effortlessly. When you change props or types between the two, those updates are automatically reflected in the router. This feature accelerates your development cycles.

This router is essential for managing all your API requests. You can find the router.ts file in the trpc/ folder. This is where you'll define your API procedures.

Setting up tRPC

Installation

Setting up tRPC in your project

Creating a tRPC Router

On this page