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.
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.
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
- App Router-typer; server- jämfört med klientkomponenter
- Datahämtning och action-typning
- Typning av miljövariabler och konfiguration