0Pricing
TypeScript Academy · Ders

Ortam türlerini belirleme ve yapılandırma

Ortam değişkenlerini doğrulayıp türlerini belirleyin; NEXT_PUBLIC ile güvenli istemci değişkenlerini açığa çıkarın; sunucu ve istemci yapılandırmasını merkezileştirin.

Ortam türlerini belirleme ve yapılandırma, CoddyKit'te ücretsiz bir TypeScript Academy dersidir. Bu, 3 dersinin 3. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, TypeScript Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. TypeScript Academy kursu toplamda 3 dersten oluşur.

Giriş

Amaç: Doğrulanmış ortam değişkenlerini merkezileştirmek ve türleri eşzamanlı tutmaktır. process.env değerini zod ile çözümleyecek, türü belirtilmiş bir env nesnesi dışa aktaracak ve istemciye yalnızca NEXT_PUBLIC_* değerlerini sunacaksınız.

  • Çalışma zamanı doğrulaması
  • Sunucu ve istemciye sunma
  • Tek doğruluk kaynağı

Şemalar ve çözümleyici

Sunucu ve istemci için ayrı şemalar oluşturun. Başlangıç sırasında geçersiz yapılandırmada hemen başarısız olun.

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

Sunucu kullanımı

Sunucu dosyaları (rota işleyicileri ve sunucu bileşenleri) serverEnv içindeki gizli bilgilere erişebilir. Bunları asla istemciye sunmayın.

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

İstemci kullanımı

İstemci bileşenleri yalnızca NEXT_PUBLIC_* değişkenlerini içeren clientEnv değerini içe aktarır. Gizli bilgiler hiçbir zaman tarayıcıya gönderilmez.

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

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

Ortam tür bildirimleri

Ortam tür bildirimleri, process.env için DX'i iyileştirir; ancak çalışma zamanında doğrulama yapmaz—zod denetimlerini koruyun.

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

En iyi uygulamalar

En iyi uygulamalar:

  • İstemci dosyalarında asla gizli bilgileri okumayın.
  • Başlangıçta bir kez doğrulayın; sorunları yakalamak için üretim dışı ortamlarda hızla çökün.
  • Tutarlılık ve sınamalar için ortam erişimini küçük bir modülün arkasında gruplayın.

Ortam türü kontrolü

Hızlı kontrol: Ortam türleri ve bunların sunulması için güvenli yaklaşım nedir?

Özet

Özet: process.env değerini zod ile çözümleyin, türü belirtilmiş serverEnv/clientEnv değerlerini dışa aktarın ve istemciye güvenli erişim için NEXT_PUBLIC_* değerlerine güvenin.

Sıkça Sorulan Sorular

“Ortam türlerini belirleme ve yapılandırma” dersi ücretsiz mi?

Evet — “Ortam türlerini belirleme ve yapılandırma” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve TypeScript Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. TypeScript Academy kursu toplamda 3 dersten oluşur.

“Ortam türlerini belirleme ve yapılandırma” dersinde ne öğreneceğim?

Ortam değişkenlerini doğrulayıp türlerini belirleyin; NEXT_PUBLIC ile güvenli istemci değişkenlerini açığa çıkarın; sunucu ve istemci yapılandırmasını merkezileştirin. TypeScript Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

TypeScript Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te TypeScript Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 3 dersinin 3. dersidir.

“Ortam türlerini belirleme ve yapılandırma” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu TypeScript Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her TypeScript Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

  1. App Router türleri; sunucu ve istemci bileşenleri
  2. Veri getirme ve eylem türlerini belirleme
  3. Ortam türlerini belirleme ve yapılandırma
← TypeScript Academy Sayfasına Dön