Valider tes variables d’environnement avec Zod et TypeScript

Évite les crashs prod : valide tes variables d’environnement au boot avec Zod. Autocomplétion TypeScript et secrets protégés dans ton projet React Router 7.

12 septembre 2025

3 min read

Code de la leçon

Continuez votre apprentissage

Accédez aux 9 modules et 76 leçons de cette formation.

599€

Accès à vie · Garantie 30 jours

Une variable manquante ou mal nommée bloque tout le déploiement... Sans validation, l’erreur n’apparaît qu’en production.

Avec Zod tu :

vérifies la présence et le format de chaque clé dès le boot ;
profites de l’autocomplétion TypeScript (process.env.DATABASE_URL) ;
évites de propager un secret côté client par mégarde.

Terminal

1npm add zod

Zod est déjà présent dans le projet (Conform), mais on l’installe ici pour les lecteurs qui partent d’un repo vierge.

app/server/env.server.ts

1import z from "zod"
2
3const minLength = 4 // longueur mini partagée
4
5const serverEnvSchema = z.object({
6  DATABASE_URL: z
7    .string({ message: "DATABASE_URL is missing" })
8    .min(minLength, { message: "DATABASE_URL is too short" }),
9
10  FRONTEND_URL: z
11    .string({ message: "FRONTEND_URL is missing" })
12    .min(minLength, { message: "FRONTEND_URL is too short" }),
13
14  AWS_ACCESS_KEY_ID: z.string().min(minLength),
15  AWS_SECRET_ACCESS_KEY: z.string().min(minLength),
16  AWS_REGION: z.string().min(minLength),
17  AWS_S3_BUCKET_NAME: z.string().min(minLength),
18
19  BETTER_AUTH_SECRET: z.string().min(minLength),
20  BETTER_AUTH_URL: z.string().min(minLength),
21
22  STRIPE_PUBLISHABLE_KEY: z.string().min(minLength),
23  STRIPE_SECRET_KEY: z.string().min(minLength),
24  STRIPE_WEBHOOK_SECRET: z.string().min(minLength),
25
26  RESEND_API_KEY: z.string().min(minLength),
27  RESEND_FROM_EMAIL: z.string().min(minLength),
28})

Explications :

minLength centralise la contrainte minimale (4 caractères ici).
Chaque clé reçoit un message clair en cas d’erreur.
On liste seulement les variables réellement utilisées dans le projet ; pas de clé fantôme.

app/server/env.server.ts

1export const serverEnv = serverEnvSchema.parse(process.env)

parse() :

déclenche un crash explicite si une variable manque ;
renvoie un objet typé pour le reste de l’app (intellisense VS Code).

app/server/env.server.ts

1declare global {
2  namespace NodeJS {
3    interface ProcessEnv extends z.infer<typeof serverEnvSchema> {}
4  }
5}

Désormais :

1process.env.AWS_REGION // ✔ auto-complété, erreur de compile si renommé

app/root.tsx {6-9,29-35}

1import { serverEnv } from "~/server/env.server"
2
3export async function loader({ request }: Route.LoaderArgs) {
4  const { FRONTEND_URL } = serverEnv        // ^? typé string
5  /* … */
6  return data({
7    /* … */,
8    env: { FRONTEND_URL },                  // seules les clés publiques
9  })
10}

Idée : ne transmettre au client que ce qui est nécessaire (FRONTEND_URL ici).

app/root.tsx

1export function useEnv() {
2  return useRouteLoaderData<typeof loader>("root")?.env ?? null
3}

Le composant peut appeler :

1const env = useEnv()
2env && console.log(env.FRONTEND_URL)

Pas de fuite : les secrets (SMTP, Stripe) restent côté serveur.

Problème avant Zod	Avec le schéma Zod
Variable oubliée → crash prod tardif	Crash instantané, message clair
`process.env.AWSS_SECRET` (typo) passe	Erreur de compilation TypeScript
Secrets exposés par erreur	On choisit précisément `env: {}`

Sépare les variables test/staging/prod dans plusieurs fichiers .env et charge-les via dotenv.
Vérifie qu’aucun secret ne fuite côté client avec les DevTools.

la validation est reprise dans le module déploiement pour éviter un build cassé – voir /formations/react-router-7/deploiement-dune-application-react-router-7/configurer-les-github-actions.

Comprendre les concepts fondamentaux

Quelle est la principale différence entre les composants client et serveur dans React ?

Les composants serveur peuvent utiliser useState

Optimisation des performances

Quelle technique est recommandée pour éviter les rendus inutiles dans React ?

Ajouter plus d'états locaux

Architecture des données

Quel hook permet de gérer les effets de bord dans un composant React ?

useState

Débloquez ce quiz et tous les autres contenus

Leçon suivante