تكوين وقت التشغيل | Next.js العربية

تحذير:

هذه الميزة أصبحت قديمة. نوصي باستخدام متغيرات البيئة بدلاً منها، والتي تدعم أيضًا قراءة قيم وقت التشغيل.

يمكنك تشغيل التعليمات البرمجية عند بدء تشغيل الخادم باستخدام دالة register.

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

لإضافة تكوين وقت التشغيل إلى تطبيقك، افتح ملف 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