0Pricing
TypeScript Academy · Lekcja

Typowanie zmiennych środowiskowych i konfiguracja

Walidowanie i typowanie zmiennych środowiskowych, udostępnianie bezpiecznych zmiennych klienckich za pomocą NEXT_PUBLIC oraz centralizacja konfiguracji serwera i klienta

Typowanie zmiennych środowiskowych i konfiguracja to bezpłatna lekcja TypeScript Academy na CoddyKit. To lekcja 3 z 3. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej TypeScript Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs TypeScript Academy zawiera 3 lekcji w sumie.

Wprowadzenie

Cel: Scentralizować zweryfikowane zmienne środowiskowe i zachować synchronizację typów. Należy analizować process.env za pomocą zod, eksportować typowany obiekt env i udostępniać klientowi wyłącznie zmienne NEXT_PUBLIC_*.

  • Walidacja w czasie działania
  • Udostępnianie po stronie serwera i klienta
  • Jedno źródło prawdy

Schematy i parser

Należy utworzyć osobne schematy dla serwera i klienta. Nieprawidłową konfigurację trzeba odrzucać natychmiast podczas uruchamiania aplikacji.

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

Użycie po stronie serwera

Pliki serwerowe (handlery tras, komponenty serwerowe) mogą uzyskiwać dostęp do sekretów z serverEnv. Nigdy nie wolno udostępniać ich klientowi.

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

Użycie po stronie klienta

Komponenty klienckie powinny importować wyłącznie clientEnv, który zawiera zmienne NEXT_PUBLIC_*. Sekrety nigdy nie trafiają do przeglądarki.

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

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

Typowania ambientowe

Typowania ambientowe poprawiają komfort pracy z process.env, ale nie zapewniają walidacji w czasie działania — należy nadal stosować sprawdzanie 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
  }
}

Najlepsze praktyki

Najlepsze praktyki:

  • Nigdy nie należy odczytywać sekretów w plikach klienckich.
  • Konfigurację należy walidować raz podczas uruchamiania; w środowisku innym niż produkcyjne warto szybko kończyć działanie, aby wykrywać problemy.
  • Dostęp do zmiennych środowiskowych należy umieścić za pośrednictwem niewielkiego modułu, zapewniając spójność i ułatwiając testy.

Sprawdzenie typowania zmiennych środowiskowych

Szybkie sprawdzenie: Jaki jest bezpieczny sposób typowania i udostępniania zmiennych środowiskowych?

Podsumowanie

Podsumowanie: Należy analizować process.env za pomocą zod, eksportować typowane serverEnv/clientEnv i polegać na NEXT_PUBLIC_* w celu bezpiecznego udostępniania danych klientowi.

Często zadawane pytania

Czy lekcja „Typowanie zmiennych środowiskowych i konfiguracja” jest bezpłatna?

Tak — pełny tekst „Typowanie zmiennych środowiskowych i konfiguracja” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu TypeScript Academy, przejdź na CoddyKit PRO. Kurs TypeScript Academy zawiera 3 lekcji w sumie.

Co nauczysz się w „Typowanie zmiennych środowiskowych i konfiguracja”?

Walidowanie i typowanie zmiennych środowiskowych, udostępnianie bezpiecznych zmiennych klienckich za pomocą NEXT_PUBLIC oraz centralizacja konfiguracji serwera i klienta Ćwiczysz TypeScript Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć TypeScript Academy?

Nie wymagamy żadnego doświadczenia. TypeScript Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 3 z 3.

Ile czasu zajmuje lekcja „Typowanie zmiennych środowiskowych i konfiguracja”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji TypeScript Academy?

Tak. Każda lekcja TypeScript Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

  1. Typy App Routera; komponenty serwerowe a klienckie
  2. Pobieranie danych i typowanie akcji
  3. Typowanie zmiennych środowiskowych i konfiguracja
← Powrót do TypeScript Academy