Magdy Atef Zahran

مقدمه في Next.js

يا صباح الخير أو مساء النور حسب ما بتقرأ الكلام ده..

النهارده هنبدأ سلسلة جديدة هشرح فيها Next.js من الصفر للاحتراف بحيث أي حد عايز يتعلم next يقدر يعتمد علي السلسله دي أن شاء الله.

طيب إيه هو Next.js أصلاً؟

ببساطة Next.js هو فريم وورك فوق React بيخلي شغلك أسهل لو بتعمل مواقع أو تطبيقات ويب وكمان مطلوب حالياً في سوق العمل بشكل كبير، ليه؟ لأنه بيحل مشاكل زي:

الـ Routing و الـ SSR وده يعني تحميل سريع للموقع والتعامل مع الـ API بشكل اسهل والـ SEO وغيرهم كتير….

نبدأ مع أول خطوة وهي إنشاء المشروع

عشان تشتغل على Next.js لازم يكون عندك Node.js على جهازك. لو مش موجود نزله من الموقع الرسمي

nodejs

بعد كده:

افتح الـ Terminal واكتب:

npx create-next-app@latest my-next-app

بعد ما الأوامر تخلص هتلاقي المشروع جاهز عندك, هتفتحه بـ:

cd my-next-app npm run dev

افتح المتصفح على http://localhost:3000 وهتشوف أول صفحة في مشروعك جاهزه

هيكلية الملفات في Next JS

قبل ما نشتغل تعالوا نبص سوا على المجلدات والفايلات اللي جوا المشروع:

pages/: ده المكان اللي بتعمل فيه صفحات الموقع وكل ملف فيه بيترجم لصفحة تلقائيا.
public/: هنا بتحط الصور والملفات الثابتة اللي محتاج تستخدمها في مشروعك.
styles/: كل ملفات الـ CSS اللي هتستخدمها لتنسيق الموقع بتبقى هنا.

أول خطوة عملية: تعديل الصفحة الرئيسية

دلوقتي هنبدأ بأول تعديل عملي على المشروع اللي عملناه:

1- افتح ملف pages/index.js

2- غير الكود اللي جواه بالشكل ده:

export default function Home() { return ( <main style={{ textAlign: "center", marginTop: "50px" }}> <h1>مرحباً بك في أول مشروع Next.js 🚀</h1> <p>هذا هو أول تعديل على مشروعك! 👨‍💻</p> </main> ); }

ـ <h1>: ده عنوان الصفحة الرئيسية.
ـ <p>: رسالة صغيرة تحت العنوان.
هتشوف النتيجة على http://localhost:3000.