Next.js • المستوى الأول • الدرس 1

مقدمة في Next.js والموجه المعتمد على الملفات (App Router)

أهداف الدرس العلمية

فهم معمارية المجلد app في إصدارات Next.js الحديثة.
إنشاء مسار صفحة جديدة بمجرد إنشاء ملف page.js داخل مجلد مخصص.
التمييز بين Next.js و React Router في إدارة المسارات.
كتابة أول صفحة Next.js بمكوّن دالي (Functional Component).

1. ما هو File-System Routing؟

في Next.js لا نحتاج لتشغيل مكتبات مثل React Router. المجلدات داخل app/ هي التي تحدد المسارات تلقائياً، وملف page.js هو الواجهة المتاحة للزوار.

bash

app/
├── page.js              →  /  (الصفحة الرئيسية)
├── about/
│   └── page.js          →  /about
├── courses/
│   └── page.js          →  /courses
└── contact/
    └── page.js          →  /contact

2. المقارنة مع React Router

React Router

يحتاج تثبيت مكتبة خارجية + كتابة إعدادات المسارات يدوياً.

Next.js

إنشاء مجلد + ملف page.js — فقط! ✨

التطبيق العملي المباشر

تحدي الدرس الأول: إنشاء صفحة "من نحن"

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

عدّل العنوان الرئيسي <h1> ليعرض اسم فريقك (مثل: "من نحن - فريق نهضة").
غيّر نص الفقرة الأولى لوصف مشروعك (مثل: "نحن فريق متخصص في تعليم البرمجة عبر مشاريع عملية.").
أضف فقرة ثانية <p> تحمل رسالة تشجيعية (مثل: "انضم إلينا لتبدأ رحلتك في عالم التطوير!").

⏳ جارٍ تحميل المحرر التفاعلي...

فهرس المستوى الانتقال للدرس الثاني