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

من موسوعة حسوب
→ التعديل السابق
مرئينص الويكي
لا ملخص تعديل
طلا ملخص تعديل
 
(7 مراجعات متوسطة بواسطة مستخدمين اثنين آخرين غير معروضة)
سطر 1: سطر 1:
<noinclude>{{DISPLAYTITLE:واجهة سطر الأوامر في Next.js}</noinclude>
<noinclude>{{DISPLAYTITLE:واجهة سطر الأوامر في Next.js}}</noinclude>
تسمح لك واجهة سطر الأوامر CLI في تشغيل وبناء و تصدير نسخة إنتاج من تطبيق Next.js.  
تسمح لك واجهة سطر الأوامر CLI في تشغيل وبناء وتصدير نسخة إنتاج من تطبيق Next.js.  


نفّذ الأمر التالي ضمن مجلد المشروع للحصول على قائمة بكل أوامر CLI:<syntaxhighlight lang="bash">
نفّذ الأمر التالي ضمن مجلد المشروع للحصول على قائمة بكل أوامر CLI:<syntaxhighlight lang="bash">
npx next -h
npx next -h
</syntaxhighlight>''(يأتي npx مع النسخة 5.2 من npm أو أعلى)''
</syntaxhighlight>يأتي npx مع النسخة 5.2 من npm أو أعلى.


ستبدو نتيجة التنفيذ كالتالي:<syntaxhighlight lang="bash">
ستبدو نتيجة التنفيذ كالتالي:<syntaxhighlight lang="bash">
سطر 28: سطر 28:
يُنشئ الأمر <code>next build</code> نسخة إنتاج محسّنة من تطبيقك، ويُظهر الخرج معلومات عن كل وجهة.
يُنشئ الأمر <code>next build</code> نسخة إنتاج محسّنة من تطبيقك، ويُظهر الخرج معلومات عن كل وجهة.


* '''الحجم''': وهو عدد الموجودات المنزلّة عند الانتقال إلى صفحة من جهة العميل. يتضمن حجم كل وجهة الاعتماديات الخاصة بها فقط.
* '''الحجم''': وهو عدد الموجودات assets المُنزّلة عند الانتقال إلى صفحة من جهة العميل. يتضمن حجم كل وجهة الاعتماديات الخاصة بها فقط.
* '''شيفرة JS المحمّلة في البداية''': وهو عدد الموجودات المنزلّة من جانب الخادم عند زيارة الصفحة، وتظهر كمية JS المشتركة في مقياس آخر.
* '''شيفرة JS المحمّلة في البداية''': وهو عدد الموجودات المنزّلة من جانب الخادم عند زيارة الصفحة، وتظهر كمية JS المشتركة في مقياس آخر.


تُضغط كلتا القيمتين ضمن ملف مضغوط gzip، ويُشار إلى أول حمولة باللون الأخضر أو الأصفر أو الأحمر، لذلك حاول أن تبقى ضمن المؤشر الأخضر ليكون تطبيقك فعال من ناحية الأداء.
تُضغط كلتا القيمتين ضمن ملف مضغوط gzip، ويُشار إلى أول تحميل first load باللون الأخضر أو الأصفر أو الأحمر، لذلك حاول أن تبقى ضمن المؤشر الأخضر ليكون تطبيقك فعالًا من ناحية الأداء.


بالإمكان تفعيل تتبع وضع نسخة إنتاج React باستخدام الراية <code>profile--</code> عند تنفيذ <code>next build</code>، ويتطلب ذلك الإصدار 9.5 من Next أو أعلى: <syntaxhighlight lang="bash">
بالإمكان تفعيل تتبع وضع نسخة إنتاج React وأدائها باستخدام الراية <code>profile--</code> عند تنفيذ <code>next build</code>، ويتطلب ذلك الإصدار 9.5 من Next أو أعلى: <syntaxhighlight lang="bash">
next build --profile
next build --profile
</syntaxhighlight>يمكن استخدام متتبع الأداء Profiler بنفس الطريقة التي كنت ستستخدمها أثناء التطوير.
</syntaxhighlight>يمكن استخدام متتبع الأداء Profiler بنفس الطريقة التي كنت ستستخدمها أثناء التطوير. يمكن تفعيل خرج مطوّل أكثر لعملية البناء باستخدام الراية <code>debug--</code> عند تنفيذ <code>next build</code> ويتطلب ذلك الإصدار 9.5.3 من Next:<syntaxhighlight lang="bash">
 
يمكن تفعيّل خرج مطوّل أكثر لعملية البناء باستخدام الراية <code>debug--</code> عند تنفيذ <code>next build</code> ويتطلب ذلك الإصدار 9.5.3 من Next:<syntaxhighlight lang="bash">
next build --debug
next build --debug
</syntaxhighlight>تتيح هذه الراية إظهار معلومات خرج أوسع مثل إعادة كتابة الشيفرة rewrites، إعادة التوجيه redirect، الترويسات headers.
</syntaxhighlight>تتيح هذه الراية إظهار معلومات خرج أوسع مثل إعادة كتابة الشيفرة rewrites، إعادة التوجيه redirect، الترويسات headers.


== تطوير تطبيق Next.js ==
== تطوير تطبيق Next.js ==
يُشغّل الأمر <code>next dev</code> التطبيق في وضع التطوير مع ميزة التحميل الدائم hot-code reloading وتقارير الأخطاء وغيرها. يعمل التطبيق على العنوان <code><nowiki>http://localhost:3000</nowiki></code> افتراضيًا، لكنك تستطيع تغيير المنفذ باستخدام <code>p-</code> : <syntaxhighlight lang="bash">
يُشغّل الأمر <code>next dev</code> التطبيق في وضع التطوير مع ميزة إعادة التحميل السريعة hot-code reloading وتقارير الأخطاء وغيرها. يعمل التطبيق على العنوان <code><nowiki>http://localhost:3000</nowiki></code> افتراضيًا، لكنك تستطيع تغيير المنفذ باستخدام <code>p-</code>: <syntaxhighlight lang="bash">
npx next dev -p 4000
npx next dev -p 4000
</syntaxhighlight>أو باستخدام متغيّر البيئة <code>PORT</code>:<syntaxhighlight lang="bash">
</syntaxhighlight>أو باستخدام متغيّر البيئة <code>PORT</code>:<syntaxhighlight lang="bash">
PORT=4000 npx next dev
PORT=4000 npx next dev
</syntaxhighlight><blockquote>'''ملاحظة''': لا يمكن وضع متغير البيئة <code>PORT</code> في الملف <code>env.</code> لأن إقلاع خادم سيحدث قبل تهيئة أية شيفره.</blockquote>بإمكانك أيضًا اختيار اسم للمضيف ليكون مختلفًا عن الافتراضي <code>0.0.0.0</code>، قد يكون ذلك مفيدًا في لتتيح استخدام التطبيق على أجهزة أخرى ضمن شبكتك. غيّر اسم المضيف باستخدام <code>H-</code> كالتالي:<syntaxhighlight lang="bash">
</syntaxhighlight><blockquote>'''ملاحظة''': لا يمكن وضع متغير البيئة <code>PORT</code> في الملف <code>env.</code> لأن إقلاع خادم HTTP سيحدث قبل تهيئة أية شيفرة.</blockquote>بإمكانك أيضًا اختيار اسم للمضيف ليكون مختلفًا عن الافتراضي <code>0.0.0.0</code>، قد يكون ذلك مفيدًا لأجهزة أخرى على الشبكة. غيّر اسم المضيف باستخدام <code>H-</code> كالتالي:<syntaxhighlight lang="bash">
npx next dev -H 192.168.1.2
npx next dev -H 192.168.1.2
</syntaxhighlight>
</syntaxhighlight>


== إنتاج تطبيق Next.js ==
== إنتاج تطبيق Next.js ==
يُشغّل الأمر <code>next start</code> التطبيق في وضع الإنتاج، ولا بد أن يُصيّر التطبيق باستخدام <code>next build</code> أولًا. يعمل التطبيق على العنوان <code><nowiki>http://localhost:3000</nowiki></code> افتراضيًا، لكنك تستطيع تغيير المنفذ باستخدام <code>p-</code> : <syntaxhighlight lang="bash">
يُشغّل الأمر <code>next start</code> التطبيق في وضع الإنتاج، ولا بد أن يُبنَى التطبيق باستخدام <code>next build</code> أولًا. يعمل التطبيق على العنوان <code><nowiki>http://localhost:3000</nowiki></code> افتراضيًا، لكنك تستطيع تغيير المنفذ باستخدام <code>p-</code>: <syntaxhighlight lang="bash">
npx next start -p 4000
npx next start -p 4000
</syntaxhighlight>أو باستخدام متغيّر البيئة <code>PORT</code>:<syntaxhighlight lang="bash">
</syntaxhighlight>أو باستخدام متغيّر البيئة <code>PORT</code>:<syntaxhighlight lang="bash">
سطر 58: سطر 56:


== مهلة الإبقاء على الاتصال ==
== مهلة الإبقاء على الاتصال ==
من المهم جدًا عند نشر تطبيق Next.js خلف خادم وكيل يتحكم بتيار البيانات القادمة (مثل موازنات الحمولة AWS ELB/ALB) تهيئة خادم HTTP التحتي الخاص بالتطبيق لتكون مهلة الإبقاء على الاتصال [[Node.js/http#server.keepAliveTimeout|keep-alive timeouts]] أكبر من مهلة الإبقاء على الاتصال للخادم الوكيل. خلافًا لذلك، سيُنهي Node.js اتصال TCP ما أن يتجاوز مهلة الإبقاء على الاتصال دون تنبيه الخادم الوكيل. سينتج عن ذلك خطأ في الخادم الوكيل في كل مرة يحاول إعادة استخدام الاتصال الذي أنهاه خادم Node.js.
من المهم جدًا عند نشر تطبيق Next.js خلف خادم وكيل proxy يتحكم بتيار البيانات القادمة (مثل موازنات الحمولة AWS ELB/ALB) تهيئة خادم HTTP التحتي الخاص بالتطبيق لتكون مهلة الإبقاء على الاتصال [[Node.js/http#server.keepAliveTimeout|keep-alive timeouts]] أكبر من مهلة الإبقاء على الاتصال للخادم الوكيل. خلافًا لذلك، سيُنهي Node.js اتصال TCP ما إن يتجاوز مهلة الإبقاء على الاتصال دون تنبيه الخادم الوكيل. سينتج عن ذلك خطأ في الخادم الوكيل في كل مرة يحاول إعادة استخدام الاتصال الذي أنهاه خادم Node.js.


لإعداد قيم مهل الإبقاء على الاتصال في خادم إنتاج ، مرر الراية <code>keepAliveTimeout--</code> (بالميلي ثانية) إلى الأمر <code>next start</code> كالتالي:<syntaxhighlight lang="bash">
لإعداد قيم مهل الإبقاء على الاتصال في خادم إنتاج Next.js، مرر الراية <code>keepAliveTimeout--</code> (بالميلي ثانية) إلى الأمر <code>next start</code> كالتالي:<syntaxhighlight lang="bash">
npx next start --keepAliveTimeout 70000
npx next start --keepAliveTimeout 70000
</syntaxhighlight>
</syntaxhighlight>


== تدقيق الشيفرة ==
== تدقيق الشيفرة ==
يُشغِّل الأمر <code>next lint</code> المدقق ESLint للتحقق من ملفات المجلدات <code>pages</code> و <code>components</code> و <code>lib</code>. كما يزوّدك بآلية إعداد على خطوات لتساعدك على تثبيت أية اعتماديات مطلوبة إن لم يكن المدقق ESLint مهيّأً في تطبيقك.
يُشغِّل الأمر <code>next lint</code> المدقق ESLint للتحقق من ملفات المجلدات <code>pages</code> و <code>components</code> و <code>lib</code>. كما يزوّدك بآلية إعداد على خطوات لتساعدك على تثبيت أية اعتماديات مطلوبة إن لم يكن المدقق ESLint مهيّأً في تطبيقك.


إن كنت ستدقق مجلدات أخرى، يمكنك تحديد هذه المجلدات من خلا الراية <code>dir--</code>:<syntaxhighlight lang="bash">
إن كنت ستدقق مجلدات أخرى، يمكنك تحديد هذه المجلدات من خلال الراية <code>dir--</code>:<syntaxhighlight lang="bash">
next lint --dir utils
next lint --dir utils
</syntaxhighlight>
</syntaxhighlight>


== القياس عن بعد ==
== القياس عن بعد ==
تجمِّع Next.js مجموعة من البيانات المقاسة عن بعد دون أن تخزن أسماءً، لتقف على طريقة استعمال إطار العمل بشكل عام. تبقى المشاركة في هذا البرنامج أمرًا اختياريًا، وبإمكانك الانسحاب إن لم ترد مشاركة أية معلومات.
تجمِّع Next.js مجموعة من البيانات المقاسة عن بعد دون أن تخزن أسماءً أو معلومات شخصية، لتقف على طريقة استعمال إطار العمل عمومًا وتعمل على تحسينه. تبقى المشاركة في هذا البرنامج أمرًا اختياريًا، وبإمكانك الانسحاب إن لم ترد مشاركة أية معلومات، ارجع إلى [[Next.js/telemetry|هذه الصفحة]] لمزيد من التفاصيل.


== تفاصيل إطار عمل Next.js المستخدم في التطبيق ==
== تفاصيل إطار عمل Next.js المستخدم في التطبيق ==
سطر 93: سطر 91:
       react: 17.0.2
       react: 17.0.2
       react-dom: 17.0.2
       react-dom: 17.0.2
</syntaxhighlight>لا بد من ذكر هذه المعلومات عندما تريد إرسال أي تقرير على GitHub.
</syntaxhighlight>لا بد من ذكر هذه المعلومات عندما تريد إرسال أي تقرير على GitHub لفريق Next.js.


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


* الصفحة [https://nextjs.org/docs/api-reference/cli Next.js CLI] من توثيق Next.js الرسمي.
* الصفحة [https://nextjs.org/docs/api-reference/cli Next.js CLI] من توثيق Next.js الرسمي.
[[تصنيف:Next.js|{{SUBPAGENAME}}]]
[[تصنيف:Next.js API|{{SUBPAGENAME}}]]

المراجعة الحالية بتاريخ 17:13، 3 يناير 2023

تسمح لك واجهة سطر الأوامر CLI في تشغيل وبناء وتصدير نسخة إنتاج من تطبيق Next.js.

نفّذ الأمر التالي ضمن مجلد المشروع للحصول على قائمة بكل أوامر CLI:

npx next -h

يأتي npx مع النسخة 5.2 من npm أو أعلى. ستبدو نتيجة التنفيذ كالتالي:

Usage
  $ next <command>

Available commands
  build, start, export, dev, lint, telemetry, info

Options
  --version, -v   Version number
  --help, -h      Displays this message

For more information run a command with the --help flag
  $ next build --help

بإمكانك تمرير أي وسيط node إلى أمر next كالتالي:

NODE_OPTIONS='--throw-deprecation' next
NODE_OPTIONS='-r esm' next
NODE_OPTIONS='--inspect' next

ملاحظة: إن تنفيذ التعليمة next دون أمر يشابه تنفيذ الأمر next dev.

بناء تطبيق Next.js

يُنشئ الأمر next build نسخة إنتاج محسّنة من تطبيقك، ويُظهر الخرج معلومات عن كل وجهة.

  • الحجم: وهو عدد الموجودات assets المُنزّلة عند الانتقال إلى صفحة من جهة العميل. يتضمن حجم كل وجهة الاعتماديات الخاصة بها فقط.
  • شيفرة JS المحمّلة في البداية: وهو عدد الموجودات المنزّلة من جانب الخادم عند زيارة الصفحة، وتظهر كمية JS المشتركة في مقياس آخر.

تُضغط كلتا القيمتين ضمن ملف مضغوط gzip، ويُشار إلى أول تحميل first load باللون الأخضر أو الأصفر أو الأحمر، لذلك حاول أن تبقى ضمن المؤشر الأخضر ليكون تطبيقك فعالًا من ناحية الأداء.

بالإمكان تفعيل تتبع وضع نسخة إنتاج React وأدائها باستخدام الراية profile-- عند تنفيذ next build، ويتطلب ذلك الإصدار 9.5 من Next أو أعلى: 

next build --profile

يمكن استخدام متتبع الأداء Profiler بنفس الطريقة التي كنت ستستخدمها أثناء التطوير. يمكن تفعيل خرج مطوّل أكثر لعملية البناء باستخدام الراية debug-- عند تنفيذ next build ويتطلب ذلك الإصدار 9.5.3 من Next:

next build --debug

تتيح هذه الراية إظهار معلومات خرج أوسع مثل إعادة كتابة الشيفرة rewrites، إعادة التوجيه redirect، الترويسات headers.

تطوير تطبيق Next.js

يُشغّل الأمر next dev التطبيق في وضع التطوير مع ميزة إعادة التحميل السريعة hot-code reloading وتقارير الأخطاء وغيرها. يعمل التطبيق على العنوان http://localhost:3000 افتراضيًا، لكنك تستطيع تغيير المنفذ باستخدام p-: 

npx next dev -p 4000

أو باستخدام متغيّر البيئة PORT:

PORT=4000 npx next dev

ملاحظة: لا يمكن وضع متغير البيئة PORT في الملف env. لأن إقلاع خادم HTTP سيحدث قبل تهيئة أية شيفرة.

بإمكانك أيضًا اختيار اسم للمضيف ليكون مختلفًا عن الافتراضي 0.0.0.0، قد يكون ذلك مفيدًا لأجهزة أخرى على الشبكة. غيّر اسم المضيف باستخدام H- كالتالي:

npx next dev -H 192.168.1.2

إنتاج تطبيق Next.js

يُشغّل الأمر next start التطبيق في وضع الإنتاج، ولا بد أن يُبنَى التطبيق باستخدام next build أولًا. يعمل التطبيق على العنوان http://localhost:3000 افتراضيًا، لكنك تستطيع تغيير المنفذ باستخدام p-: 

npx next start -p 4000

أو باستخدام متغيّر البيئة PORT:

PORT=4000 npx next start

مهلة الإبقاء على الاتصال

من المهم جدًا عند نشر تطبيق Next.js خلف خادم وكيل proxy يتحكم بتيار البيانات القادمة (مثل موازنات الحمولة AWS ELB/ALB) تهيئة خادم HTTP التحتي الخاص بالتطبيق لتكون مهلة الإبقاء على الاتصال keep-alive timeouts أكبر من مهلة الإبقاء على الاتصال للخادم الوكيل. خلافًا لذلك، سيُنهي Node.js اتصال TCP ما إن يتجاوز مهلة الإبقاء على الاتصال دون تنبيه الخادم الوكيل. سينتج عن ذلك خطأ في الخادم الوكيل في كل مرة يحاول إعادة استخدام الاتصال الذي أنهاه خادم Node.js.

لإعداد قيم مهل الإبقاء على الاتصال في خادم إنتاج Next.js، مرر الراية keepAliveTimeout-- (بالميلي ثانية) إلى الأمر next start كالتالي:

npx next start --keepAliveTimeout 70000

تدقيق الشيفرة

يُشغِّل الأمر next lint المدقق ESLint للتحقق من ملفات المجلدات pages و components و lib. كما يزوّدك بآلية إعداد على خطوات لتساعدك على تثبيت أية اعتماديات مطلوبة إن لم يكن المدقق ESLint مهيّأً في تطبيقك.

إن كنت ستدقق مجلدات أخرى، يمكنك تحديد هذه المجلدات من خلال الراية dir--:

next lint --dir utils

القياس عن بعد

تجمِّع Next.js مجموعة من البيانات المقاسة عن بعد دون أن تخزن أسماءً أو معلومات شخصية، لتقف على طريقة استعمال إطار العمل عمومًا وتعمل على تحسينه. تبقى المشاركة في هذا البرنامج أمرًا اختياريًا، وبإمكانك الانسحاب إن لم ترد مشاركة أية معلومات، ارجع إلى هذه الصفحة لمزيد من التفاصيل.

تفاصيل إطار عمل Next.js المستخدم في التطبيق

يطبع الأمر next info التفاصيل المتعلقة بإطار العمل الحالي كي تستخدمه عند إرسال تقرير عن ثغرة في Next.js. تتصمن المعلومات نظام التشغيل (المنصة/ المعمارية arch/ الإصدار) والملفات بالصيغة الثنائية (Node.js و npm و Yarn و pnpm) وإصدار حزمة npm (next و react و react-dom).

نفّذ الأمر التالي في المجلد الجذري لمشروعك:

next info

وستكون النتيجة مشابهة لما يلي:

 Operating System:
      Platform: linux
      Arch: x64
      Version: #22-Ubuntu SMP Fri Nov 5 13:21:36 UTC 2021
    Binaries:
      Node: 16.13.0
      npm: 8.1.0
      Yarn: 1.22.17
      pnpm: 6.24.2
    Relevant packages:
      next: 12.0.8
      react: 17.0.2
      react-dom: 17.0.2

لا بد من ذكر هذه المعلومات عندما تريد إرسال أي تقرير على GitHub لفريق Next.js.

المصادر

  • الصفحة Next.js CLI من توثيق Next.js الرسمي.
مجلوبة من «https://wiki.hsoub.com/index.php?title=Next.js/cli&oldid=32575»