متغيرات البيئة (env) | Next.js العربية

منذ إصدار Next.js 9.4 أصبح لدينا تجربة أكثر سهولة وبديهية لإضافة متغيرات البيئة. جربها الآن!

معلومة مفيدة: متغيرات البيئة المحددة بهذه الطريقة سيتم دائمًا تضمينها في حزمة JavaScript، إضافة البادئة NEXT_PUBLIC_ إلى اسم متغير البيئة يكون له تأثير فقط عند تحديدها من خلال البيئة أو ملفات .env.

لإضافة متغيرات البيئة إلى حزمة JavaScript، افتح ملف next.config.js وأضف إعداد env:

next.config.js

module.exports = {
  env: {
    customKey: 'my-value',
  },
}

الآن يمكنك الوصول إلى process.env.customKey في الكود الخاص بك. على سبيل المثال:

function Page() {
  return <h1>قيمة customKey هي: {process.env.customKey}</h1>
}

export default Page

سيقوم Next.js باستبدال process.env.customKey بـ 'my-value' أثناء وقت البناء. محاولة تفكيك متغيرات process.env لن تعمل بسبب طبيعة DefinePlugin في webpack.

على سبيل المثال، السطر التالي:

return <h1>قيمة customKey هي: {process.env.customKey}</h1>

سينتهي به المطاف إلى:

return <h1>قيمة customKey هي: {'my-value'}</h1>