جافاسكريبت: احفظ مفتاح API في ملف .env
لا تكتب المفتاح داخل الكود. .env و.gitignore ومتغير Vercel.
كل الدروس · دروس جافاسكريبت: تعلّم من الصفر
لا تضع المفتاح في الكود
كتابة المفتاح داخل جافاسكريبت للتدريب على حاسوبك فقط. حين يصل إلى GitHub تجده البرامج خلال ثوانٍ. يرسل غيرك طلبات بمفتاحك فينفد الحد والرصيد. إذا كان في الجزء الظاهر من الموقع يراه أي شخص بـ F12. يجب أن يذهب الطلب في الخلفية، على الخادم.
ملف .env
اسم الملف .env وليس ad.env. يقف في المجلد الرئيسي للمشروع. يُكتب الاسم بأحرف كبيرة وتُفصل الكلمات بـ _. بلا علامات اقتباس ولا فاصلة منقوطة ولا const. يقرأه الكود بـ process.env.GEMINI_API_KEY. في Node.js العادي أولاً npm install dotenv ثم import "dotenv/config".
GEMINI_API_KEY=acar const apiKey = process.env.GEMINI_API_KEY;
GitHub وVercel
اكتب .env و.env.local داخل .gitignore. عندها يذهب الكود ويبقى المفتاح على الجهاز. في Vercel: Settings ثم Environment Variables. الاسم GEMINI_API_KEY والقيمة هي المفتاح نفسه. بعد تغيير الملف أوقف الطرفية وأعد تشغيلها، وإلا كانت النتيجة undefined. في Next.js لا تكتب NEXT_PUBLIC_ أمام المفتاح: ذلك يرسله إلى المتصفح.
node_modules .env .env.local
أسئلة
هل أكتب const وعلامات اقتباس داخل .env؟ لا. فقط الاسم=القيمة. ولا تضع فراغاً بجانب علامة المساواة.
لماذا يعطي process.env قيمة undefined؟ الملف تغيّر للتو والخادم ما زال يمسك القديم. أغلق الطرفية وشغّلها من جديد.
لماذا NEXT_PUBLIC_ خطرة؟ هذه الكلمة ترسل المتغير إلى المتصفح. لا تستخدمها مع مفتاح سري.
أين يجب أن يبقى المفتاح؟ على الخادم، داخل process.env. لا في الكود الذي يعمل في المتصفح.