Next.js • المستوى الرابع • الدرس 1

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

أهداف الدرس العلمية

فهم إدارة المتغيرات البيئية المخبأة عبر ملف .env.local.
الفرق بين المتغيرات السرية على الخادم والمتغيرات العامة المبدوءة بـ NEXT_PUBLIC_.
الوصول للمتغيرات في الكود عبر process.env.
حماية البيانات الحساسة من التسريب للمتصفح.

1. تنظيم وتأمين البيانات الحساسة

تتيح لك Next.js حماية مفاتيح API وعناوين قواعد البيانات تلقائياً، فلا يتم تسريب مفاتيح السيرفر للعميل أبداً.

bash

# .env.local (ملف محلي، لا يُرفع على Git)
DATABASE_URL=postgresql://...
API_SECRET_KEY=abc123xyz
NEXT_PUBLIC_APP_NAME=منصة نهضة
NEXT_PUBLIC_SITE_URL=https://nahda.dev

2. نوعان من المتغيرات

🔒 متغير سري

متاح على الخادم فقط. لا يمكن للمتصفح رؤيته.

bash

API_SECRET_KEY=abc123

🌐 متغير عام

يبدأ بـ NEXT_PUBLIC_ ومتاح في المتصفح.

bash

NEXT_PUBLIC_APP_NAME=نهضة

التطبيق العملي المباشر

تحدي الدرس الأول: إضافة متغير بيئي جديد

قم بالتعديل على الكود في المحرر أدناه:

أضف متغيراً بيئياً جديداً باسم siteUrl يقرأ من process.env.NEXT_PUBLIC_SITE_URL.
اعرض قيمة siteUrl في نفس الصندوق الداكن بجانب المتغيرات الأخرى.
أضف ملخصاً بصرياً أسفل الصندوق يعرض: "التطبيق: [appName] — الإصدار v[appVersion]".

⏳ جارٍ تحميل المحرر التفاعلي...

فهرس المستوى 4 الانتقال للمشروع النهائي