في App Router، هيكل المجلد داخل app/ يحدد مساراتك — لا توجد إعدادات توجيه يجب كتابتها. كل مجلد هو قطعة من عنوان URL، والملفات الخاصة بداخله تحدد ما يقدمه هذا القطعة.
app/
page.tsx → /
about/page.tsx → /about
blog/page.tsx → /blog
blog/[slug]/page.tsx → /blog/:slug (dynamic segment)
shop/(sale)/page.tsx → /shop (route group — parentheses don't add to URL)
يمكن لكل مجلد أن يحتوي على أسماء ملفات محجوزة، كل منها بدور محدد:
page.tsx → the route's UI (REQUIRED to make a segment routable)
layout.tsx → shared wrapper that persists across child routes
loading.tsx → loading UI (auto-wraps the page in <Suspense>)
error.tsx → error boundary for the segment
not-found.tsx→ 404 UI
route.ts → an API endpoint (instead of a page)
// app/blog/[slug]/page.tsx → matches /blog/hello, /blog/anything
export default function Post({ params }: { params: { slug: string } }) {
return <h1>Post: {params.slug}</h1>; // params.slug = "hello"
}
الأقواس المربعة تنشئ معاملًا ديناميكيًا يتم تمريره إلى الصفحة عبر params. الاختلافات: [...slug] (التقط الكل)، [[...slug]] (اختياري للتقط الكل).
app/(marketing)/about/page.tsx → /about (the (marketing) folder is ignored in the URL)
الأقواس تنشئ مجموعات مسارات لتنظيم الملفات أو تطبيق تخطيطات مختلفة دون التأثير على عنوان URL.
التوجيه القائم على الملفات يجعل هيكل عنوان URL واضحًا من شجرة الملفات — لا توجد إعدادات توجيه مركزية يجب الحفاظ عليها والتأكد من توافقها.
معرفة أسماء الملفات الخاصة (page، layout، loading، error، route) واتفاقيات الأقواس ([param]، [...catchAll]، (group)) هي المفردات الأساسية لبناء أي تطبيق App Router.