0Pricing
TypeScript Academy · درس

كتابة متغيرات البيئة والإعدادات

تحقق من متغيرات البيئة وحدد أنواعها، واعرض متغيرات العميل الآمنة باستخدام NEXT_PUBLIC، ومركز الإعدادات للخادم والعميل.

كتابة متغيرات البيئة والإعدادات درس مجاني في TypeScript Academy على CoddyKit. هذا هو الدرس 3 من أصل 3. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في TypeScript Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة TypeScript Academy 3 دروس في المجموع.

مقدمة

الهدف: توحيد متغيرات البيئة التي تم التحقق منها والحفاظ على تزامن الأنواع. ستحلل process.env باستخدام zod، وتصدّر كائن env ذا أنواع، ولا تتيح للعميل سوى NEXT_PUBLIC_*.

  • التحقق في وقت التشغيل
  • إتاحة المتغيرات للخادم مقابل العميل
  • مصدر واحد للحقيقة

المخططات والمحلّل

أنشئ مخططات منفصلة لـالخادم والعميل. أوقف التشغيل فورًا عند وجود إعدادات غير صالحة أثناء الإقلاع.

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

الاستخدام على الخادم

يمكن لملفات الخادم (معالجات المسارات، ومكوّنات الخادم) الوصول إلى الأسرار من serverEnv. لا تكشفها للعميل مطلقًا.

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

الاستخدام على العميل

تستورد مكوّنات العميل clientEnv فقط، وهو يحتوي على متغيرات NEXT_PUBLIC_*. لا تُرسل الأسرار إلى المتصفح مطلقًا.

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

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

التعريفات النوعية المحيطة

تحسّن التعريفات النوعية المحيطة تجربة المطور مع process.env، لكنها لا تتحقق في وقت التشغيل؛ لذلك حافظ على فحوصات 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
  }
}

أفضل الممارسات

أفضل الممارسات:

  • لا تقرأ الأسرار مطلقًا في ملفات العميل.
  • تحقق مرة واحدة عند بدء التشغيل، وأوقف التشغيل سريعًا في بيئة غير الإنتاج لاكتشاف المشكلات.
  • ضع الوصول إلى متغيرات البيئة خلف وحدة صغيرة لضمان الاتساق والاختبار.

التحقق من كتابة متغيرات البيئة

تحقق سريع: ما النمط الآمن لتحديد أنواع متغيرات البيئة وإتاحتها؟

خلاصة

خلاصة: حلّل process.env باستخدام zod، وصدّر serverEnv/clientEnv ذوي الأنواع، واعتمد على NEXT_PUBLIC_* لإتاحة آمنة للعميل.

الأسئلة الشائعة

هل درس «كتابة متغيرات البيئة والإعدادات» مجاني؟

نعم — نص درس «كتابة متغيرات البيئة والإعدادات» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة TypeScript Academy، انتقل إلى CoddyKit PRO. تتضمن دورة TypeScript Academy 3 دروس في المجموع.

ماذا ستتعلم في «كتابة متغيرات البيئة والإعدادات»؟

تحقق من متغيرات البيئة وحدد أنواعها، واعرض متغيرات العميل الآمنة باستخدام NEXT_PUBLIC، ومركز الإعدادات للخادم والعميل. تتمرن على TypeScript Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ TypeScript Academy؟

لا تُشترط خبرة سابقة. TypeScript Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 3 من أصل 3.

كم من الوقت يستغرق درس «كتابة متغيرات البيئة والإعدادات»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس TypeScript Academy هذا؟

نعم. كل درس في TypeScript Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

  1. أنواع App Router؛ مكوّنات الخادم مقابل العميل
  2. جلب البيانات وكتابة الإجراءات
  3. كتابة متغيرات البيئة والإعدادات
← العودة إلى TypeScript Academy