إعداد تطبيق Next.js جديد
أولاً، دعونا نتأكد من أن بيئة التطوير الخاصة بك جاهزة.
- إذا لم يكن لديك Node.js مثبتًا، قم بتثبيته من هنا. ستحتاج إلى إصدار Node.js 18 أو أعلى.
- ستستخدم محرر النصوص الخاص بك وتطبيق الطرفية (terminal) لهذا البرنامج التعليمي.
إذا كنت تستخدم نظام Windows، نوصي بتحميل Git for Windows واستخدام Git Bash الذي يأتي معه، والذي يدعم الأوامر الخاصة بنظام UNIX في هذا البرنامج التعليمي. نظام Windows الفرعي لتوزيعات Linux (WSL) هو خيار آخر.
إنشاء تطبيق Next.js
لإنشاء تطبيق Next.js، افتح الطرفية (terminal)، انتقل إلى الدليل الذي ترغب في إنشاء التطبيق فيه باستخدام الأمر cd
، ثم قم بتنفيذ الأمر التالي:
npx create-next-app@latest nextjs-blog --use-npm --example "https://github.com/vercel/next-learn/tree/main/basics/learn-starter"
في الخلفية، يستخدم هذا الأمر أداة تسمى
create-next-app
، والتي تقوم بإعداد تطبيق Next.js لك. تستخدم هذا القالب من خلال علامة--example
.إذا لم يعمل الأمر، يرجى مراجعة هذه الصفحة.
تشغيل خادم التطوير
لديك الآن دليل جديد يسمى nextjs-blog
. دعونا ننتقل إليه باستخدام الأمر cd
:
cd nextjs-blog
ثم، قم بتنفيذ الأمر التالي:
npm run dev
سيؤدي هذا إلى بدء "خادم التطوير" (سنتحدث عنه لاحقًا) لتطبيق Next.js على المنفذ 3000.
لنتحقق مما إذا كان يعمل. افتح http://localhost:3000 من متصفحك.