0Pricing
TypeScript Academy · Pelajaran

Pengetikan env dan konfigurasi

Validasi dan ketik variabel lingkungan; tampilkan variabel klien yang aman dengan NEXT_PUBLIC; pusatkan konfigurasi untuk server dan klien.

Pengetikan env dan konfigurasi adalah pelajaran TypeScript Academy gratis di CoddyKit. Ini adalah pelajaran 3 dari 3. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar TypeScript Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus TypeScript Academy mencakup 3 pelajaran total.

Pendahuluan

Tujuan: Memusatkan variabel lingkungan yang tervalidasi dan menjaga agar tipenya tetap selaras. Anda akan mengurai process.env dengan zod, mengekspor objek env bertipe, dan hanya memaparkan NEXT_PUBLIC_* kepada klien.

  • Validasi saat runtime
  • Paparan server dibandingkan klien
  • Satu sumber kebenaran

Skema & pengurai

Buat skema terpisah untuk server dan klien. Gagal lebih awal pada konfigurasi yang tidak valid selama proses mulai.

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

Penggunaan server

Berkas server (pengendali rute, komponen server) dapat mengakses rahasia dari serverEnv. Jangan pernah memaparkannya kepada klien.

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

Penggunaan klien

Komponen klien hanya mengimpor clientEnv, yang berisi variabel NEXT_PUBLIC_*. Rahasia tidak pernah dikirim ke peramban.

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

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

Pengetikan lingkungan

Pengetikan lingkungan meningkatkan DX untuk process.env, tetapi tidak melakukan validasi saat runtime—tetap gunakan pemeriksaan 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
  }
}

Praktik terbaik

Praktik terbaik:

  • Jangan pernah membaca rahasia dalam berkas klien.
  • Validasi sekali saat mulai; hentikan dengan cepat di non-produksi untuk menemukan masalah.
  • Kelompokkan akses env di balik modul kecil agar konsisten dan mudah diuji.

Pemeriksaan pengetikan env

Pemeriksaan singkat: Apa pola yang aman untuk pengetikan/paparan env?

Ringkasan

Ringkasan: Urai process.env dengan zod, ekspor serverEnv/clientEnv bertipe, dan andalkan NEXT_PUBLIC_* untuk paparan klien yang aman.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Pengetikan env dan konfigurasi” gratis?

Ya — teks lengkap “Pengetikan env dan konfigurasi” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus TypeScript Academy, upgrade ke CoddyKit PRO. Kursus TypeScript Academy mencakup 3 pelajaran total.

Apa yang akan aku pelajari di “Pengetikan env dan konfigurasi”?

Validasi dan ketik variabel lingkungan; tampilkan variabel klien yang aman dengan NEXT_PUBLIC; pusatkan konfigurasi untuk server dan klien. Kamu berlatih TypeScript Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai TypeScript Academy?

Tidak diperlukan pengalaman sebelumnya. TypeScript Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 3 dari 3.

Berapa lama pelajaran “Pengetikan env dan konfigurasi” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran TypeScript Academy ini?

Ya. Setiap pelajaran TypeScript Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

  1. Tipe App Router; komponen server vs klien
  2. Pengambilan data & pengetikan action
  3. Pengetikan env dan konfigurasi
← Kembali ke TypeScript Academy