Next.js هو إطار عمل معروف لـ React يساعدك على إنشاء مواقع ويب سريعة وعصرية، وهو سهل الاستخدام ويحتوي على ميزات قوية مثل الرندر على جانب الخادم، وإنشاء صفحات ثابتة، وبناء واجهات برمجة التطبيقات.
إذا كنت تبحث عن بدء مشروع Next.js على أنظمة Ubuntu الخاصة بك، ستوجهك هذه الدليل خلال العملية خطوة بخطوة.
المتطلبات السابقة
قبل أن تبدأ في إعداد مشروع Next.js، هناك بعض الأشياء التي ستحتاج إلى تثبيتها على نظام Linux الخاص بك، والتي تشمل:
Node.js: Next.js مبني علىNode.js، لذا تحتاج إلى تثبيت Node.js.npm: npm (مدير حزم Node) يستخدم لإدارة الحزم والاعتماديات لمشروعك.
لنستعرض عملية التثبيت لكل من Node.js و npm.
الخطوة 1: تثبيت Node.js و NPM في Linux
قبل تثبيت أي برنامج جديد، من الجيد تحديث قائمة الحزم لديك للتأكد من أنك تثبت أحدث إصدار من البرنامج المتاح في المستودعات.
sudo apt update
بعد ذلك، يمكنك تثبيت Node.js (كما أنه يقوم بتثبيت npm)، ومن الأفضل تثبيت الإصدار الذي يحمل علامة LTS (الدعم طويل الأجل)، حيث إنه الأكثر استقرارًا واستخدامًا على نطاق واسع.
sudo apt install nodejs
بعد اكتمال التثبيت، تحقق من أن Node.js تم تثبيته بشكل صحيح من خلال التحقق من إصداره:
node -v npm -v
الآن لديك كل من Node.js و npm مثبتين على نظامك.
الخطوة 2: تثبيت وإعداد مشروع Next.js
الآن بعد أن قمت بتثبيت Node.js و npm، حان الوقت لإنشاء مشروع جديد Next.js. أسهل طريقة لتثبيت Next.js هي استخدام create-next-app، وهو حزمة رسمية مقدمة من فريق Next.js.
sudo npm install -g create-next-app
الآن بعد تثبيت create-next-app، يمكنك إنشاء مشروع جديد Next.js.
npx create-next-app@latest my-next-app
هنا، my-next-app هو اسم مجلد مشروعك. يمكنك استبداله بأي اسم تفضله. ستقوم أمر npx بتنزيل وتشغيل حزمة create-next-app، وستقوم بإعداد مشروع جديد Next.js لك.
بمجرد انتهاء الأمر من التشغيل، سيكون لديك مجلد جديد يسمى my-next-app مع الهيكل الأساسي لتطبيق Next.js.
الخطوة 3: تشغيل مشروع Next.js الخاص بك
بعد إنشاء المشروع، انتقل إلى مجلد مشروعك وابدأ خادم التطوير:
cd my-next-app npm run dev
سيؤدي هذا الأمر إلى بدء خادم تطوير Next.js. بشكل افتراضي، سيعمل الخادم على http://localhost:3000.
افتح متصفحك وانتقل إلى هذا الرابط، ويجب أن ترى صفحة الترحيب الافتراضية لـ Next.js.
يمكنك البدء في إنشاء صفحات جديدة في مجلد app. على سبيل المثال، قم بإنشاء ملف جديد about.js داخل دليل app لإنشاء صفحة حول.
الخاتمة
لقد قمت بإعداد مشروع Next.js جديد بنجاح على جهازك Ubuntu! الآن يمكنك البدء في بناء تطبيق الويب الخاص بك عن طريق إضافة صفحات جديدة، ومكونات، وميزات.
Next.js تجعل من السهل بناء تطبيقات الويب الحديثة، ومع مساعدة هذا الدليل، لقد تعلمت كيفية تثبيت وإعداد مشروع Next.js.