الفرق بين المراجعتين لصفحة: «Next.js/next.config.js»

من موسوعة حسوب
→ التعديل السابقالتعديل اللاحق ←
مرئينص الويكي
لا ملخص تعديل
لا ملخص تعديل
سطر 57: سطر 57:
}
}
</syntaxhighlight>تُوضع الإعدادات المسموحة) في <code>next.config.js</code> مكان أسطر التعليقات في الشيفرات السابقة. مع ذلك، لا حاجة إلى أية إعدادات، وليس من الضرورة فهم عمل كل إعداد. كل ما عليك هو البحث عن الميزات التي تريد تفعيلها أو تعديلها في هذه الصفحة وستريك ما العمل.<blockquote>تفادى استخدام ميزات JavaScript الجديدة في اصدار  Node.js الذي تستهدفه. فلن يُحلل الملف <code>next.config.js</code> من قبل Webpack أو Babel أو TypeScript.</blockquote>
</syntaxhighlight>تُوضع الإعدادات المسموحة) في <code>next.config.js</code> مكان أسطر التعليقات في الشيفرات السابقة. مع ذلك، لا حاجة إلى أية إعدادات، وليس من الضرورة فهم عمل كل إعداد. كل ما عليك هو البحث عن الميزات التي تريد تفعيلها أو تعديلها في هذه الصفحة وستريك ما العمل.<blockquote>تفادى استخدام ميزات JavaScript الجديدة في اصدار  Node.js الذي تستهدفه. فلن يُحلل الملف <code>next.config.js</code> من قبل Webpack أو Babel أو TypeScript.</blockquote>
== متغيرات البيئة ==
<blockquote>تقدم ابتداءً من الإصدار تجربة تعليمية وعملية في [[Next.js/environment variables|إضافة متغيرات البيئة]]. حاول أن تجربها.</blockquote>لإضافة متغيرات بيئة إلى تجميعة JavaScript، افتح الملف <code>next.config.js</code> وأضف الإعداد <code>env</code>:<syntaxhighlight lang="javascript">
module.exports = {
  env: {
    customKey: 'my-value',
  },
}
</syntaxhighlight>بإمكانك الآن الوصول إلى <code>process.env.customKey</code> في شيفرتك. إليك مثالًا:<syntaxhighlight lang="javascript">
function Page() {
  return <h1>The value of customKey is: {process.env.customKey}</h1>
}
export default Page
</syntaxhighlight>تستبدل Next.js أثناء البناء المفاتيح  <code>process.env.customKey</code> بالقيمة <code>'my-value'</code>. وانتبه إلى أنك لن تستطيع تفكيك متغيرات <code>process.env</code> نظرًا لطبيعة الإضافة DefinePlugin في webpack. فلو ألقينا نظرة مثلًا على السطر البرمجي التالي:<syntaxhighlight lang="javascript">
return <h1>The value of customKey is: {process.env.customKey}</h1>
</syntaxhighlight>سينتهي الأمر على النحو:<syntaxhighlight lang="javascript">
return <h1>The value of customKey is: {'my-value'}</h1>
</syntaxhighlight>


== المصادر ==
== المصادر ==


* الصفحات [https://nextjs.org/docs/api-reference/next.config.js/introduction Next.config.js] من توثيق Next.js الرسمي.
* الصفحات [https://nextjs.org/docs/api-reference/next.config.js/introduction Next.config.js] من توثيق Next.js الرسمي.

مراجعة 08:16، 11 يوليو 2022

بإمكانك إنشاء الملف next.config.js أو next.config.mjs في جذر مشروعك وإلى جوار الملف package.json، إن كنت ترغب في تطبيق إعدادت متقدمة على تطبيق Next.js.

يُعد الملف next.config.jsوحدة نمطية Node.js وليس ملف JSON، ويُستخدم من قبل خادم Next.js وخلال مراحل بناء التطبيق ولا يُضمَّن في تجميعة المتصفح.

إليك مثالًا عن ملف التهيئة next.config.js:

/**
 * @type {import('next').NextConfig}
 */
const nextConfig = {
  /* ضع الإعدادات هنا  */
}

module.exports = nextConfig

إن احتجت إلى وحدات ECMAScript بإمكانك استخدام الملف:

/**
 * @type {import('next').NextConfig}
 */
const nextConfig = {
  /* ضع الإعدادات هنا  */
}

export default nextConfig

بإمكانك استخدام دالة أيضًا:

module.exports = (phase, { defaultConfig }) => {
  /**
   * @type {import('next').NextConfig}
   */
  const nextConfig = {
    /* ضع الإعدادات هنا  */
  }
  return nextConfig
}

يمكن ابتداءً بالنسخة 12.1.0 استخدام دالة متزامنة:

module.exports = async (phase, { defaultConfig }) => {
  /**
   * @type {import('next').NextConfig}
   */
  const nextConfig = {
    /* ضع الإعدادات هنا */
  }
  return nextConfig
}

يُعد السياق phase هو السياق الحالي لتحميل الإعدادات وتواجد سياقات أخرى أيضًا. يمكن إدراج المراحل phases من الوحدة next/constants:

const { PHASE_DEVELOPMENT_SERVER } = require('next/constants')

module.exports = (phase, { defaultConfig }) => {
  if (phase === PHASE_DEVELOPMENT_SERVER) {
    return {
      /* ضع إعدادات مرحلة التطوير هنا */
    }
  }

  return {
    /* ضع إعدادات كل المراحل هنا ما عدا مرحلة التطوير */
  }
}

تُوضع الإعدادات المسموحة) في next.config.js مكان أسطر التعليقات في الشيفرات السابقة. مع ذلك، لا حاجة إلى أية إعدادات، وليس من الضرورة فهم عمل كل إعداد. كل ما عليك هو البحث عن الميزات التي تريد تفعيلها أو تعديلها في هذه الصفحة وستريك ما العمل.

تفادى استخدام ميزات JavaScript الجديدة في اصدار Node.js الذي تستهدفه. فلن يُحلل الملف next.config.js من قبل Webpack أو Babel أو TypeScript.

متغيرات البيئة

تقدم ابتداءً من الإصدار تجربة تعليمية وعملية في إضافة متغيرات البيئة. حاول أن تجربها.

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

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

بإمكانك الآن الوصول إلى process.env.customKey في شيفرتك. إليك مثالًا:

function Page() {
  return <h1>The value of customKey is: {process.env.customKey}</h1>
}

export default Page

تستبدل Next.js أثناء البناء المفاتيح process.env.customKey بالقيمة 'my-value'. وانتبه إلى أنك لن تستطيع تفكيك متغيرات process.env نظرًا لطبيعة الإضافة DefinePlugin في webpack. فلو ألقينا نظرة مثلًا على السطر البرمجي التالي:

return <h1>The value of customKey is: {process.env.customKey}</h1>

سينتهي الأمر على النحو:

return <h1>The value of customKey is: {'my-value'}</h1>

المصادر

مجلوبة من «https://wiki.hsoub.com/index.php?title=Next.js/next.config.js&oldid=32202»