0Pricing
TypeScript Academy · Lektion

Typisierung von Umgebungsvariablen und Konfiguration

Validieren und typisieren Sie Umgebungsvariablen, stellen Sie sichere Client-Variablen mit NEXT_PUBLIC bereit und zentralisieren Sie die Konfiguration für Server und Client.

Typisierung von Umgebungsvariablen und Konfiguration ist eine kostenlose TypeScript Academy-Lektion auf CoddyKit. Dies ist Lektion 3 von 3. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des TypeScript Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der TypeScript Academy-Kurs umfasst insgesamt 3 Lektionen.

Einführung

Ziel: Zentralisieren Sie validierte Umgebungsvariablen und halten Sie die Typen synchron. Sie parsen process.env mit zod, exportieren ein typisiertes env-Objekt und geben nur NEXT_PUBLIC_* an den Client weiter.

  • Laufzeitvalidierung
  • Weitergabe an Server oder Client
  • Single Source of Truth

Schemas & Parser

Erstellen Sie separate Schemas für Server und Client. Brechen Sie beim Start bei einer ungültigen Konfiguration sofort ab.

// 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)

Verwendung auf dem Server

Serverdateien wie Route-Handler und Server Components können über serverEnv auf Geheimnisse zugreifen. Geben Sie diese niemals an den Client weiter.

// 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) })
}

Verwendung auf dem Client

Client Components importieren ausschließlich clientEnv, das NEXT_PUBLIC_*-Variablen enthält. Geheimnisse werden niemals an den Browser ausgeliefert.

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

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

Ambient-Typdefinitionen

Ambient-Typdefinitionen verbessern die DX für process.env, validieren aber nicht zur Laufzeit – behalten Sie die zod-Prüfungen bei.

// 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
  }
}

Bewährte Vorgehensweisen

Bewährte Vorgehensweisen:

  • Lesen Sie niemals Geheimnisse in Clientdateien.
  • Validieren Sie einmal beim Start; brechen Sie in Nicht-Produktionsumgebungen schnell ab, um Probleme zu erkennen.
  • Kapseln Sie den Zugriff auf Umgebungsvariablen für Konsistenz und Tests in einem kleinen Modul.

Env-Typisierung prüfen

Kurze Prüfung: Was ist ein sicherer Ansatz für die Typisierung und Weitergabe von Umgebungsvariablen?

Zusammenfassung

Zusammenfassung: Parsen Sie process.env mit zod, exportieren Sie typisierte serverEnv/clientEnv-Objekte und verlassen Sie sich für die sichere Weitergabe an den Client auf NEXT_PUBLIC_*.

Häufig gestellte Fragen

Ist die Lektion „Typisierung von Umgebungsvariablen und Konfiguration“ kostenlos?

Ja — der vollständige Text von „Typisierung von Umgebungsvariablen und Konfiguration“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des TypeScript Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der TypeScript Academy-Kurs umfasst insgesamt 3 Lektionen.

Was lerne ich in „Typisierung von Umgebungsvariablen und Konfiguration“?

Validieren und typisieren Sie Umgebungsvariablen, stellen Sie sichere Client-Variablen mit NEXT_PUBLIC bereit und zentralisieren Sie die Konfiguration für Server und Client. Du übst TypeScript Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um TypeScript Academy zu starten?

Keine Vorkenntnisse erforderlich. TypeScript Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 3 von 3.

Wie lange dauert die Lektion „Typisierung von Umgebungsvariablen und Konfiguration“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser TypeScript Academy-Lektion Code schreiben und ausführen?

Ja. Jede TypeScript Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

  1. App-Router-Typen; Server- vs. Client-Komponenten
  2. Datene Abrufe und Action-Typisierung
  3. Typisierung von Umgebungsvariablen und Konfiguration
← Zurück zu TypeScript Academy