0Pricing
TypeScript Academy · Leçon

Typage de l’environnement et configuration

Validez et typez les variables d’environnement ; exposez les variables client sûres avec NEXT_PUBLIC ; centralisez la configuration côté serveur et client.

Typage de l’environnement et configuration est une leçon TypeScript Academy gratuite sur CoddyKit. Ceci est la leçon 3 sur 3. 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 TypeScript Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours TypeScript Academy comprend 3 leçons au total.

Introduction

Objectif : centraliser les variables d’environnement validées et maintenir leurs types synchronisés. Vous analyserez process.env avec zod, exporterez un objet env typé et n’exposerez au client que les variables NEXT_PUBLIC_*.

  • Validation à l’exécution
  • Exposition côté serveur ou côté client
  • Source unique de vérité

Schémas et analyseur

Créez des schémas distincts pour le serveur et le client. Échouez rapidement si la configuration est invalide au démarrage.

// app/lib/env.ts
import { z } from "zod"

const serverSchema = z.object({
  NODE_ENV: z.enum(["development", "test", "production"]),
  DATABASE_URL: z.string().url(),
  API_SECRET: z.string().min(1)
})

const clientSchema = z.object({
  NEXT_PUBLIC_API_BASE: z.string().url()
})

function parseEnv<T extends z.ZodTypeAny>(schema: T, source: Record<string, unknown>) {
  const r = schema.safeParse(source)
  if (!r.success) {
    console.error(r.error.format())
    throw new Error("Invalid environment variables")
  }
  return r.data as z.infer<T>
}

export const serverEnv = parseEnv(serverSchema, process.env)
export const clientEnv = parseEnv(clientSchema, process.env)

Utilisation côté serveur

Les fichiers serveur (gestionnaires de route, composants serveur) peuvent accéder aux secrets depuis serverEnv. Ne les exposez jamais au client.

// app/api/users/route.ts
import { NextResponse } from "next/server"
import { serverEnv } from "@/app/lib/env"

export async function GET() {
  // Safe to read secrets on the server
  const db = serverEnv.DATABASE_URL
  return NextResponse.json({ ok: true, dbConfigured: Boolean(db) })
}

Utilisation côté client

Les composants client importent uniquement clientEnv, qui contient les variables NEXT_PUBLIC_*. Les secrets ne sont jamais envoyés au navigateur.

"use client"
import { clientEnv } from "@/app/lib/env"

export default function ApiBaseNotice() {
  return <small>API base: {clientEnv.NEXT_PUBLIC_API_BASE}</small>
}

Typages ambiants

Les typages ambiants améliorent DX pour process.env, mais n’effectuent pas de validation à l’exécution : conservez les vérifications zod.

// env.d.ts (optional hints; runtime validation still required)
/// <reference types="node" />

declare namespace NodeJS {
  interface ProcessEnv {
    NODE_ENV: "development" | "test" | "production"
    DATABASE_URL?: string
    API_SECRET?: string
    NEXT_PUBLIC_API_BASE?: string
  }
}

Bonnes pratiques

Bonnes pratiques :

  • Ne lisez jamais de secrets dans les fichiers client.
  • Validez une seule fois au démarrage ; arrêtez rapidement l’application hors production pour détecter les problèmes.
  • Regroupez l’accès aux variables d’environnement derrière un petit module pour uniformiser leur utilisation et effectuer les vérifications.

Vérification du typage et de l’exposition de l’environnement

Vérification rapide : quel est le modèle sûr pour typer et exposer les variables d’environnement ?

Récapitulatif

Récapitulatif : analysez process.env avec zod, exportez serverEnv/clientEnv avec leurs types et utilisez NEXT_PUBLIC_* pour exposer le contenu au client en toute sécurité.

Questions Fréquemment Posées

La leçon « Typage de l’environnement et configuration » est-elle gratuite ?

Oui — le texte complet de « Typage de l’environnement et configuration » 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 TypeScript Academy, passe à CoddyKit PRO. Le cours TypeScript Academy comprend 3 leçons au total.

Qu'est-ce que j'apprendrai dans « Typage de l’environnement et configuration » ?

Validez et typez les variables d’environnement ; exposez les variables client sûres avec NEXT_PUBLIC ; centralisez la configuration côté serveur et client. Tu pratiques TypeScript Academy 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 TypeScript Academy ?

Aucune expérience préalable n'est requise. TypeScript Academy 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 3 sur 3.

Combien de temps prend la leçon « Typage de l’environnement et configuration » ?

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 TypeScript Academy ?

Oui. Chaque leçon TypeScript Academy 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. Types du routeur d’application ; composants serveur ou client
  2. Récupération des données et typage des actions
  3. Typage de l’environnement et configuration
← Retour à TypeScript Academy