واجهة سطر الأوامر (CLI) لـ Next.js

تتيح واجهة سطر أوامر Next.js بدء وتجميع وتصدير تطبيقك.

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

npx next -h

(npx يأتي مع npm 5.2+ والإصدارات الأعلى)

يجب أن يبدو الناتج كالتالي:

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

التجميع (Build)

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

• الحجم – عدد الأصول التي يتم تنزيلها عند التنقل إلى الصفحة من جانب العميل. حجم كل مسار يشمل فقط تبعياته.
• أول تحميل لـ JS – عدد الأصول التي يتم تنزيلها عند زيارة الصفحة من الخادم. يتم عرض كمية JS المشتركة بين جميع الصفحات كمقياس منفصل.

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

يمكنك تمكين تحليل الأداء للإنتاج لـ React باستخدام وسيط --profile في next build. هذا يتطلب Next.js 9.5:

next build --profile

بعد ذلك، يمكنك استخدام محلل الأداء بنفس الطريقة كما في وضع التطوير.

يمكنك تمكين ناتج تجميع أكثر تفصيلاً باستخدام وسيط --debug في next build. هذا يتطلب Next.js 9.5.3:

next build --debug

مع تمكين هذا الوسيط، سيتم عرض ناتج تجميع إضافي مثل إعادة الكتابة، إعادة التوجيه، والعناوين.

التطوير (Development)

next dev يبدأ التطبيق في وضع التطوير مع إعادة تحميل الساخن للكود، الإبلاغ عن الأخطاء، والمزيد:

سيبدأ التطبيق افتراضياً على 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

الإنتاج (Production)

next start يبدأ التطبيق في وضع الإنتاج. يجب تجميع التطبيق أولاً باستخدام next build.

سيبدأ التطبيق افتراضياً على http://localhost:3000. يمكن تغيير المنفذ الافتراضي باستخدام -p، كما يلي:

npx next start -p 4000

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

PORT=4000 npx next start

معلومة مفيدة:

• لا يمكن تعيين PORT في .env لأن تشغيل خادم HTTP يحدث قبل تهيئة أي كود آخر.

• لا يمكن استخدام next start مع output: 'standalone' أو output: 'export'.

مهلة الاتصال المستمر (Keep Alive Timeout)

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

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

npx next start --keepAliveTimeout 70000

الفحص (Lint)

next lint يقوم بتشغيل ESLint لجميع الملفات في أدلة pages/، app/، components/، lib/، و src/. كما يوفر إعداداً موجهًا لتثبيت أي تبعيات مطلوبة إذا لم يكن ESLint مضبوطاً بالفعل في تطبيقك.

إذا كان لديك أدلة أخرى تريد فحصها، يمكنك تحديدها باستخدام وسيط --dir:

next lint --dir utils

القياس عن بعد (Telemetry)

يجمع Next.js بيانات مجهولة تماماً عن الاستخدام العام. المشاركة في هذا البرنامج المجهول اختيارية، ويمكنك عدم المشاركة إذا كنت لا ترغب في مشاركة أي معلومات.

للمزيد عن القياس عن بعد، يرجى قراءة هذا المستند.

معلومات Next (Next Info)

next info يطبع تفاصيل ذات صلة عن النظام الحالي التي يمكن استخدامها للإبلاغ عن أخطاء Next.js. تشمل هذه المعلومات نظام التشغيل (المنصة/الهيكل/الإصدار)، الملفات الثنائية (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 info --verbose لطباعة معلومات إضافية عن النظام وتثبيت الحزم المتعلقة بـ next.