0Pricing
tRPC End-to-End Type Safe APIs · Leçon

Configurer votre premier projet tRPC

Découvrez comment installer tRPC, créer un routeur et connecter un client pour effectuer votre tout premier appel avec vérification des types.

Configurer votre premier projet tRPC est une leçon tRPC End-to-End Type Safe APIs gratuite sur CoddyKit. Ceci est la leçon 4 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage tRPC End-to-End Type Safe APIs, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours tRPC End-to-End Type Safe APIs comprend 4 leçons au total.

Certaines parties de cette leçon n'ont pas encore été traduites et s'affichent en anglais.

What We Are Building

You know what tRPC is and why type safety matters. Now you'll set up a real project and make your first end-to-end type-safe call.

Installing the Packages

tRPC ships as separate server and client packages. Install them alongside Zod for validation.

npm install @trpc/server @trpc/client zod

Initializing tRPC

Create one t object with initTRPC.create() — everything else (router, procedures) is built from it.

import { initTRPC } from "@trpc/server";

const t = initTRPC.create();

export const router = t.router;
export const publicProcedure = t.procedure;

Creating a Router

A router groups procedures. Here's a minimal one exposing a single greeting query.

export const appRouter = router({
  hello: publicProcedure.query(() => {
    return "Hello tRPC";
  }),
});

Exporting the Router Type

The core trick: export only the router's type, not its code. The client learns the full API shape with zero codegen.

export type AppRouter = typeof appRouter;

Serving the Router

Attach your router to an HTTP server using a tRPC adapter — here, the standalone createHTTPServer.

import { createHTTPServer } from "@trpc/server/adapters/standalone";

createHTTPServer({ router: appRouter }).listen(3000);

Creating the Client

The client imports the AppRouter type to unlock full autocomplete and type checking against your server.

import { createTRPCClient, httpBatchLink } from "@trpc/client";
import type { AppRouter } from "./server";

const client = createTRPCClient<AppRouter>({
  links: [httpBatchLink({ url: "http://localhost:3000" })],
});

Making the First Call

Call the procedure as if it were a local typed function — that's the whole point of tRPC.

const greeting = await client.hello.query();
console.log(greeting); // "Hello tRPC"

Type Safety in Action

Type safety in action: rename hello on the server and the client call becomes a compile error instantly — no runtime surprise.

Project Structure

A common project layout: server/trpc.ts for the t object, server/router.ts for procedures, and client/index.ts for the typed client.

Adding Inputs

Most procedures take input. Validate it with Zod and that input type flows to the client automatically.

greet: publicProcedure
  .input(z.object({ name: z.string() }))
  .query(({ input }) => "Hi " + input.name),

Quick Check

Test your setup knowledge.

Recap

Recap: you installed the tRPC packages, built a router and exported its type, and made a typed client call — a full end-to-end type-safe pipeline.

Questions Fréquemment Posées

La leçon « Configurer votre premier projet tRPC » est-elle gratuite ?

Oui — le texte complet de « Configurer votre premier projet tRPC » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours tRPC End-to-End Type Safe APIs, passe à CoddyKit PRO. Le cours tRPC End-to-End Type Safe APIs comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Configurer votre premier projet tRPC » ?

Découvrez comment installer tRPC, créer un routeur et connecter un client pour effectuer votre tout premier appel avec vérification des types. Tu pratiques tRPC End-to-End Type Safe APIs avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer tRPC End-to-End Type Safe APIs ?

Aucune expérience préalable n'est requise. tRPC End-to-End Type Safe APIs sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 4 sur 4.

Combien de temps prend la leçon « Configurer votre premier projet tRPC » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon tRPC End-to-End Type Safe APIs ?

Oui. Chaque leçon tRPC End-to-End Type Safe APIs inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

  1. Qu’est-ce que tRPC ?
  2. La puissance de la sûreté des types
  3. Vue d’ensemble des concepts fondamentaux de tRPC
  4. Configurer votre premier projet tRPC
← Retour à tRPC End-to-End Type Safe APIs