TypeScript Academy · Lektion

Typning av miljövariabler och konfiguration

Validera och typa miljövariabler, exponera säkra klientvariabler med NEXT_PUBLIC och centralisera konfigurationen för server och klient.

Lektion 3 av 38 steg

Typning av miljövariabler och konfiguration är en gratis lektion i TypeScript Academy på CoddyKit. Detta är lektion 3 av 3. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för TypeScript Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i TypeScript Academy innehåller totalt 3 lektioner.

Introduktion

Mål: Centralisera validerade miljövariabler och håll typerna synkroniserade. Du ska tolka process.env med zod, exportera ett typat env-objekt och endast exponera NEXT_PUBLIC_* för klienten.

  • Validering vid körning
  • Exponering på server kontra klient
  • En enda källa till sanning

Scheman och tolkning

Skapa separata scheman för server och klient. Avbryt direkt vid ogiltig konfiguration under uppstart.

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

Användning på servern

Serverfiler (route handlers, serverkomponenter) kan komma åt hemligheter från serverEnv. Exponera dem aldrig för klienten.

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

Användning på klienten

Klientkomponenter importerar endast clientEnv, som innehåller variabler med NEXT_PUBLIC_*. Hemligheter skickas aldrig till webbläsaren.

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

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

Ambient-typningar

Ambient-typningar förbättrar utvecklarupplevelsen för process.env, men validerar inte vid körning – behåll zod-kontrollerna.

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

Bästa praxis

Bästa praxis:

  • Läs aldrig hemligheter i klientfiler.
  • Validera en gång vid uppstart; krascha snabbt i icke-produktionsmiljö för att upptäcka problem.
  • Samla åtkomst till env bakom en liten modul för konsekvens och tester.

Kontroll av miljövariabeltypning

Snabb kontroll: Vilket är ett säkert mönster för typning och exponering av miljövariabler?

Sammanfattning

Sammanfattning: Tolka process.env med zod, exportera typade serverEnv/clientEnv och använd NEXT_PUBLIC_* för säker exponering på klienten.

Gratis att börja

Lär dig TypeScript med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser
101
Lektioner
352

Vanliga frågor

Är lektionen ”Typning av miljövariabler och konfiguration” gratis?

Ja – hela texten till ”Typning av miljövariabler och konfiguration” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i TypeScript Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i TypeScript Academy innehåller totalt 3 lektioner.

Vad lär jag mig i ”Typning av miljövariabler och konfiguration”?

Validera och typa miljövariabler, exponera säkra klientvariabler med NEXT_PUBLIC och centralisera konfigurationen för server och klient. Ni övar på TypeScript Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig TypeScript Academy?

Du behöver inga förkunskaper. Utbildningen i TypeScript Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 3 av 3.

Hur lång tid tar lektionen ”Typning av miljövariabler och konfiguration”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här TypeScript Academy-lektionen?

Ja. Varje TypeScript Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

  1. App Router-typer; server- jämfört med klientkomponenter
  2. Datahämtning och action-typning
  3. Typning av miljövariabler och konfiguration
← Tillbaka till TypeScript Academy