لو بلّشت تتعلم Next.js حديثًا أو رجعت لمشروع قديم، رح تصادف تعبيرين: App Router وPages Router. هاد الفرق الحقيقي بينهم، وأيهم تستخدم اليوم.
Pages Router — النظام الأصلي
Pages Router هو نظام التوجيه (routing) الأصلي بـ Next.js منذ البداية — كل ملف داخل مجلد pages/ بيصير صفحة تلقائيًا حسب اسمه:
pages/
index.js → /
about.js → /about
blog/[slug].js → /blog/:slug
- ✅ بسيط ومباشر جدًا للفهم
- ✅ نضج كبير، توثيق ومشاريع قديمة كتيرة مبنية عليه
- ❌ كل صفحة component واحد فقط — بلا تقسيم بين server/client بشكل أصيل
- ❌ تحميل البيانات محصور بدوال محددة زي
getServerSideProps
App Router — النظام الجديد
App Router (من Next.js 13 وطالع) نظام أحدث كليًا، مبني حول مجلد app/ ومفهوم React Server Components:
app/
page.tsx → /
about/page.tsx → /about
blog/[slug]/page.tsx → /blog/:slug
layout.tsx → تخطيط مشترك لكل الصفحات تحته
- ✅ React Server Components بشكل أصيل — مكونات تشتغل على السيرفر فقط، تقلل حجم الجافاسكربت المرسل للمتصفح
- ✅ تحميل بيانات مباشرة داخل أي مكون (
async function Page())، بلا دوال خاصة - ✅ Layouts متداخلة — كل مجلد فيه
layout.tsxخاص فيه بدون إعادة رندر التخطيط الأب - ✅ Loading وError states جاهزة بملفات خاصة (
loading.tsx،error.tsx) - ❌ منحنى تعلّم أعلى — مفاهيم جديدة (Server vs Client Components) تحتاج فهم
جدول المقارنة
| المعيار | Pages Router | App Router |
|---|---|---|
| المجلد | pages/ | app/ |
| Server Components | لا | نعم (افتراضي) |
| تحميل البيانات | دوال خاصة (getServerSideProps) | مباشرة بالمكون نفسه |
| Layouts متداخلة | محدودة | كاملة ومرنة |
| التطوير المستقبلي | متوقف عمليًا | كل الميزات الجديدة هنا |
| الأنسب لـ | مشاريع قديمة موجودة | أي مشروع جديد |
متى تستخدم كل وحدة؟
- مشروع جديد سنة 2026؟ → App Router بلا نقاش، هو الافتراضي الرسمي وفيه كل الميزات الحديثة.
- مشروع قديم شغّال بـ Pages Router؟ → خليه إذا شغّال منيح، وفكّر بالتحويل التدريجي (صفحة صفحة) بس لو بتحتاج ميزات App Router فعليًا.
- بتتعلم Next.js من الصفر؟ → تعلّم App Router مباشرة، لأنه الأساس يلي كل التوثيق والأمثلة الحديثة مبنية عليه.
الخلاصة
App Router مو مجرد "تحديث تجميلي" — هو إعادة تفكير كاملة بكيفية بناء تطبيقات Next.js، مبنية حول Server Components وتحميل بيانات أبسط. لو بتبلش اليوم، ما فيه سبب حقيقي تستخدم Pages Router — App Router هو المستقبل الرسمي والحاضر كمان.
ابدأ مسار Next.js الكامل بالعربي — من الأساسيات لحد App Router والنشر.