واجهة سطر الأوامر في Next.js

تسمح لك واجهة سطر الأوامر 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 نسخة إنتاج محسّنة من تطبيقك، ويُظهر الخرج معلومات عن كل وجهة.

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

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

بالإمكان تفعيل تتبع وضع نسخة إنتاج 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 خلف خادم وكيل يتحكم بتيار البيانات القادمة (مثل موازنات الحمولة 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 CLI من توثيق Next.js الرسمي.