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.

3 min read
Code de la leçon
Déverrouillez votre potentiel

avec React Router 7

Vous en avez marre de...

❌ perdre du temps à chercher des informations éparpillées
❌ ne pas avoir de retour sur votre progression
Assistant IA spécialisé

Posez vos questions 24/7 à notre IA experte en React Router 7

Quiz interactifs

Validez vos acquis avec des quiz personnalisés et un feedback instantané

9 modules
76 leçons
Accès à vie
299.49€
-35%

Pourquoi valider tes variables d’environnement ?

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 :

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

Installer Zod côté serveur

Terminal
1
npm 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.

Créer le schéma serverEnvSchema

app/server/env.server.ts
1
import z from "zod"

2


3
const minLength = 4 // longueur mini partagée

4


5
const 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.

Parser et exposer l’objet typé

app/server/env.server.ts
1
export const serverEnv = serverEnvSchema.parse(process.env)

parse() :

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

Étendre le type ProcessEnv (auto-complétion)

app/server/env.server.ts
1
declare global {

2
  namespace NodeJS {

3
    interface ProcessEnv extends z.infer<typeof serverEnvSchema> {}

4
  }

5
}

Désormais :

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

Utiliser les variables dans le loader root

app/root.tsx {6-9,29-35}
1
import { serverEnv } from "~/server/env.server"

2


3
export 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).

Créer un hook côté client

app/root.tsx
1
export function useEnv() {

2
  return useRouteLoaderData<typeof loader>("root")?.env ?? null

3
}

Le composant peut appeler :

1
const env = useEnv()

2
env && console.log(env.FRONTEND_URL)

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

Avantages immédiats

Problème avant ZodAvec le schéma Zod
Variable oubliée → crash prod tardifCrash instantané, message clair
process.env.AWSS_SECRET (typo) passeErreur de compilation TypeScript
Secrets exposés par erreurOn choisit précisément env: {}

Aller plus loin

  • 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.

Inclus
Quiz interactif
Testez vos connaissances et validez votre compréhension du module avec notre quiz interactif.
1

Comprendre les concepts fondamentaux

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

Les composants client s'exécutent uniquement dans le navigateur
Les composants serveur peuvent utiliser useState
Les composants client sont plus rapides
Il n'y a aucune différence significative
2

Optimisation des performances

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

Utiliser React.memo pour les composants fonctionnels
Ajouter plus d'états locaux
Éviter d'utiliser les props
Toujours utiliser les class components
3

Architecture des données

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

useEffect
useState
useMemo
useContext
4

Gestion des erreurs

Comment implémenter la gestion des erreurs pour les requêtes API dans React ?

Utiliser try/catch avec async/await
Ignorer les erreurs
Toujours afficher un message d'erreur
Rediriger l'utilisateur
5

Déploiement et CI/CD

Quelle est la meilleure pratique pour déployer une application React en production ?

Utiliser un service CI/CD comme GitHub Actions
Copier les fichiers manuellement via FTP
Envoyer le code source complet
Ne jamais mettre à jour l'application

Débloquez ce quiz et tous les autres contenus inclus en achetant ce cours

Dans cette leçon