الهدف
بنهاية الدرس تقدر تقرأ وتكتب JSON بـ JSON.parse وـ JSON.stringify، وعندك MY_API_KEY ينقرا من .env.local في API route ويرجع في response — وما وصل لـ GitHub.
ليش هذا الحين؟
ترى كل شي في الـ web يتكلم JSON — responses من APIs، config files، بيانات بين services. لو ما تعرف تقراه وتكتبه، ما تقدر تتعامل مع أي API بدون مطور. و env vars؟ كل key سرية تكتبها مباشرة في الكود = خطر. GitHub مو مكان للأسرار.
الفكرة
JSON (JavaScript Object Notation) = أكثر لغة بيانات مستخدمة على الإنترنت.
تركيبته بسيطة وايد — ست أنواع بس:
{
"name": "محمد",
"age": 32,
"active": true,
"score": null,
"tags": ["founder", "vibe-coder"],
"address": {
"city": "الكويت",
"country": "KW"
}
}
- Object:
{ "key": value }— مجموعة أزواج key-value - Array:
[item1, item2]— قائمة - String:
"نص"— دائما بين double quotes - Number:
42أو3.14 - Boolean:
trueأوfalse - Null:
null
في JavaScript:
// من JSON string لـ object
const obj = JSON.parse('{"name": "محمد"}')
console.log(obj.name) // "محمد"
// من object لـ JSON string
const json = JSON.stringify({ city: "الكويت" })
console.log(json) // '{"city":"الكويت"}'
Environment Variables = config يتغير بين البيئات.
| البيئة | مكان الـ config |
|---|---|
| Development (جهازك) | .env.local |
| Production (Vercel) | Project Settings → Env Vars |
| CI/CD | Secrets في GitHub Actions |
القاعدة: لو القيمة تتغير بين بيئة وثانية، أو لو هي سر — env var. مو hardcode في الكود.
MY_API_KEY=sk-abc123 ← في .env.local
process.env.MY_API_KEY ← في الكود