Next.js/create next app

إن أسهل الطرق لتبدأ بناء تطبيقات Next.js هو استخدام الأداة create-next-app. تمكنك هذه الأداة التي تستخدم واجهة سطر الأوامر CLI أن تبدأ بناء تطبيق Next.js جديد بسرعة بعد أن تهيئ لك كل شئ. بإمكانك بناء تطبيق جديد بالاستفادة من قالب Next.js الافتراضي أو باستخدام أحد قوالب Next.js الرسمية.

الوضع التفاعلي

يمكنك إنشاء تطبيق Next.js مع الوضع التفاعلي بتنفيذ الأمر التالي:

npx create-next-app@latest
# أو
yarn create next-app
# أو
pnpm create next-app

ستُسأَل عن بعض الأسئلة المتعلقة بمشروعك وضبطه مثل إن كنت تريد استخدام لغة TypeScript:

✔ Would you like to use TypeScript with this project? … No / Yes

في هذه الحالة اختر Yes لتنزيل الحزم والاعتماديات اللازمة لإنشاء مشروع جديد مع TypeScript.

الوضع غير التفاعلي

يمكنك مباشرة تمرير الخيارات اللازمة لضبط مشروعك مباشرةً دون استخدام الوضع التفاعلي وانظر خرج create-next-app --help لمعرفة الخيارات المتوفرة:

create-next-app <project-directory> [options]

Options:
  -V, --version                      output the version number
  --ts, --typescript

    Initialize as a TypeScript project. (default)

  --js, --javascript

    Initialize as a JavaScript project.

  --eslint

    Initialize with eslint config.

  --no-eslint

    Initialize without eslint config.

  --experimental-app

    Initialize as a `app/` directory project.

  --use-npm

    Explicitly tell the CLI to bootstrap the app using npm

  --use-pnpm

    Explicitly tell the CLI to bootstrap the app using pnpm

  -e, --example [name]|[github-url]

    An example to bootstrap the app with. You can use an example name
    from the official Next.js repo or a GitHub URL. The URL can use
    any branch and/or subdirectory

  --example-path <path-to-example>

    In a rare case, your GitHub URL might contain a branch name with
    a slash (e.g. bug/fix-1) and the path to the example (e.g. foo/bar).
    In this case, you must specify the path to the example separately:
    --example-path foo/bar

نشرح أهم تلك الخيارات:

• typescript-- أو ts--: ويُستخدم لتهيئة التطبيق كمشروع TypeScript.
• example [name]|[github-url]-- أو e--: ويقدّم مثالًا لتحميل التطبيق من خلاله. بإمكانك استخدام اسم المثال من مستودع Next.js أو من خلال عنوان URL على GitHub. يمكن ان يضم العنوان أي فرغ أو/و مجلد فرعي.
• example-path [path-to-example]--: قد يتضمن عنوان URL في حالات نادرة على اسم فرع يضم المحرف "/" (مثل bug/fix-1) ومسارًا إلى المثال (مثل foo/bar). لا بد في هذه الحالة من تخصيص المسار إلى المثال بشكل مستقل: example-path foo/bar--.
• use-npm--: يجبر CLI صراحة على استخدام npm في تحميل التطبيق.
• use-pnpm--: يجبر CLI صراحة على استخدام pnpm في تحميل التطبيق.

ملاحظة: ننصحك بتنفيذ الأمر yarn create next-app لإنشاء تطبيق جديد باستخدام yarn.

إيجابيات استخدام Create Next App

تساعدك الأداة في إنشاء تطبيق Next.js خلال ثوانٍ، وتجري صيانته باستمرار من قبل مصممي Next.js. تقدم الأداة إضافة إلى ذلك الفوائد التالية:

• التجربة التفاعلية: يؤدي تنفيذ الأمر npx create-next-app@latest إلى تشغيل دليل يرشدك بأسلوب تفاعلي إلى خطوات إعداد المشروع.
• لا حاجة لإدراج اعتماديات: لا تحتاج الأداة إلى أية اعتماديات لإنشاء مشروع، ويهيأ خلال ثوانٍ.
• دعم دون اتصال: تستشعر الأداة تلقائيًا أنك دون اتصال، وتحمّل مشروعك من الذاكرة المؤقتة المحلية.
• دعم الأمثلة: تُحمّل الأداة تطبيقك باستخدام مثال من مجموعة أمثلة (مثل npx create-next-app --example api-routes).
• أداة مختبرة: هذه الحزمة جزء من مستودع Next.js وهي مختبرة باستخدام اختبارات التكامل ذاتها التي تُطبق على Next.js لضمان عملها في أي إصدار.

اقرأ أيضًا

• الصفحات في Next.js
• الدعم المدمج لتنسيقات CCS في Next.js
• استخدام واجهة سطر الأوامر CLI في Next.js

المصادر

• الصفحة Create Next App من توثيق Next.js الرسمي.