Next.js App Router موجّه App
آخر تحديث: 2026-11-03
Next.js App Router موجّه App
موجّه App هو موجّه اصطلاح الملفات المُدخَل في Next.js 13+: كل مجلد تحت app/ يصبح مقطع URL واحدًا، و page.tsx تُعرّف الصفحة، و layout.tsx هي التخطيط المشترك الذي لا يُعاد تصييره عند التنقّل، وتتكفّل ملفات loading و error بحالات التحميل والخطأ تلقائيًا. والنتيجة توجيه بلا تقريبًا أي رمز تهيئة.
| المجموعة | المنظومة والتقدّم |
|---|---|
| النوع | نمط |
| منذ الإصدار | أُدخِل مع Next.js 13 (موجّه App)، ولا يزال يتطوّر في 14 / 15 |
ℹ️ ملاحظة يحوّل المحرّر JSX إلى JavaScript ويعرض الواجهة الحقيقية داخل بيئة معزولة؛ تُركَّب المكوّنات تلقائياً دون استدعاء render يدوي.
📝 الصيغة
app/
├─ layout.tsx # root layout: shared by every route
├─ page.tsx # route / (home page)
├─ about/
│ └─ page.tsx # route /about
└─ posts/
├─ page.tsx # route /posts
└─ [slug]/
└─ page.tsx # dynamic route /posts/:slug
// app/about/page.tsx — a server component can be async by default
export default async function AboutPage() {
return <h1>About us</h1>
}⚙️ المعاملات
| page.tsx | ملف الدخول الوحيد للمسار؛ وبغيابه في مجلد لا يُولَّد أي مسار. |
|---|---|
| layout.tsx | مكوّن التخطيط المشترك: يبقى مُركَّبًا بينما تتغيّر المسارات الفرعية ولا يُعاد تصييره، ما يجعله المكان المناسب لشريط تنقّل أو شريط جانبي. |
| [slug] dynamic segment | اسم مجلد بين أقواس مربّعة يُعلن معاملًا ديناميكيًا، ويقرأ مكوّن الصفحة القيمة الفعلية من params.slug. |
القيمة المرجعة：لا قيمة مرتجعة — موجّه App موجّه باصطلاح الملفات؛ والقواعد موصوفة في بناء الجملة والمثال.
▶ مثال
المثال يعمل مباشرة: يُعرض تلقائياً عند التوسيع وتظهر التعديلات فوراً.
الناتج：
محاكاة: اللوحة اليسرى مبدّل صفحات — النقر على أحد أزرار المسارات الأربعة يُظلِّله بالأزرق ويغيّر الصفحة الحالية؛ وتعرض لوحة شجرة الملفات على اليمين مسار ملف app/ الذي يدعم URL الحالي آنيًا، فمثلًا /posts/hello تقابل app/posts/[slug]/page.tsx. وهذا يُظهر اصطلاح «الملفات هي المسارات» لمحة سريعة.💡 النقاط الأساسية
💡 نصيحة يظل التخطيط مُركَّبًا أثناء تغيّر المسارات، فوضع شريط التنقّل والشريط الجانبي هنا يتجنّب إعادة تصيير الصفحة كاملة ويحفظ حالته الداخلية.
ℹ️ ملاحظة أي page.tsx بلا 'use client' في الأعلى هي مكوّن خادمي، فتستطيع انتظار البيانات مباشرةً دون الحاجة إلى useEffect.
⚠️ تحذير أسماء المجلدات تقرّر URL وهي حسّاسة لحالة الأحرف: إعادة تسمية مجلد تغيّر المسار، فتذكّر تحديث الروابط الداخلية.
🏷️ المزيد من المنظومة
💡 حالات ذات صلة
المزيد من الحالات قريباً.
📚 دروس ذات صلة
❓ الأسئلة الشائعة
س ما الفرق بين موجّه App وموجّه Pages؟
ج يستخدم موجّه Pages مجلد pages/ إضافةً إلى دوال بيانات مثل getServerSideProps؛ بينما يستخدم موجّه App اصطلاح مجلد app/، ويتخذ المكوّنات الخادمية افتراضيًا ويدمج التخطيطات بطريقة أكثر طبيعية — وهو التوصية الرسمية للمشاريع الجديدة.
س ما الفرق بين layout و template؟
ج يظل layout مُركَّبًا ولا يُعاد تصييره عند تغيّر المسارات الفرعية؛ بينما يُركَّب template من جديد في كل تنقّل (ما يعيد تشغيل حركة الدخول)، فاستخدم template فقط حين تريد حالة جديدة في كل زيارة.
س كيف أعرّف مسارًا ديناميكيًا؟
ج استخدم الأقواس المربّعة في اسم المجلد: app/posts/[slug]/page.tsx تقابل /posts/:slug، ويستقبل مكوّن الصفحة slug في وسيط params؛ بل ويلتقط [...slug] عدة مقاطع مسار.
