تكوين وقت التشغيل (Runtime Config)

تحذير: تعتبر هذه الميزة قديمة ولا تعمل مع التحسين الثابت التلقائي (Automatic Static Optimization)، أو تتبع ملفات الإخراج (Output File Tracing)، أو مكونات خادم React (React Server Components). يرجى استخدام متغيرات البيئة (environment variables) بدلاً من ذلك لتجنب تكاليف التهيئة.

لإضافة تكوين وقت التشغيل إلى تطبيقك، افتح ملف next.config.js وأضف تكوينات publicRuntimeConfig و serverRuntimeConfig:

next.config.js

module.exports = {
  serverRuntimeConfig: {
    // سيكون متاحًا فقط على جانب الخادم
    mySecret: 'secret',
    secondSecret: process.env.SECOND_SECRET, // تمرير عبر متغيرات البيئة
  },
  publicRuntimeConfig: {
    // سيكون متاحًا على كل من الخادم والعميل
    staticFolder: '/static',
  },
}

ضع أي تكوين وقت تشغيل خاص بالخادم فقط تحت serverRuntimeConfig.

أي شيء يمكن الوصول إليه من كود جانب العميل والخادم يجب وضعه تحت publicRuntimeConfig.

أي صفحة تعتمد على publicRuntimeConfig يجب أن تستخدم getInitialProps أو getServerSideProps أو يجب أن يحتوي تطبيقك على تطبيق مخصص (Custom App) مع getInitialProps للانسحاب من التحسين الثابت التلقائي (Automatic Static Optimization). لن يكون تكوين وقت التشغيل متاحًا لأي صفحة (أو مكون في صفحة) بدون تقديم من جانب الخادم.

للوصول إلى تكوينات وقت التشغيل في تطبيقك، استخدم next/config كما يلي:

import getConfig from 'next/config'
import Image from 'next/image'

// يحتوي فقط على serverRuntimeConfig و publicRuntimeConfig
const { serverRuntimeConfig, publicRuntimeConfig } = getConfig()
// سيكون متاحًا فقط على جانب الخادم
console.log(serverRuntimeConfig.mySecret)
// سيكون متاحًا على كل من جانب الخادم والعميل
console.log(publicRuntimeConfig.staticFolder)

function MyImage() {
  return (
    <div>
      <Image
        src={`${publicRuntimeConfig.staticFolder}/logo.png`}
        alt="logo"
        layout="fill"
      />
    </div>
  )
}

export default MyImage