يحتوي Next.js على نظامي توجيه. Pages Router (pages/) هو النظام الأصلي؛ بينما App Router (app/، منذ Next 13) هو النظام الأحدث والموصى به والذي تم بناؤه حول React Server Components.
Pages Router (pages/) App Router (app/)
──────────────────────────────────────────────────────
pages/about.tsx → /about app/about/page.tsx → /about
Default export = page page.tsx = page, layout.tsx = layout
getServerSideProps (SSR) async Server Components (fetch directly)
getStaticProps (SSG) fetch() with caching options
_app.tsx / _document.tsx Nested layout.tsx files
All components client-rendered Server Components by default
// App Router — a Server Component that fetches data directly, no extra API
// app/users/page.tsx
export default async function Users() {
const res = await fetch("https://api.example.com/users"); // runs on the SERVER
const users = await res.json();
return <ul>{users.map(u => <li key={u.id}>{u.name}</li>)}</ul>;
}
في App Router، المكونات هي Server Components بشكل افتراضي — فهي تعمل على الخادم، يمكنها await البيانات مباشرة، وترسل صفر JavaScript لذلك المكون إلى المتصفح. بدلاً من ذلك، استخدم Pages Router دوال خاصة (getServerSideProps) لتمرير البيانات إلى الصفحات المرسومة من جانب العميل.
layout.tsx).loading.tsx / Suspense.استخدم App Router للمشاريع الجديدة — فهو حيث يركز تطوير Next.js. يظل Pages Router مدعوماً (والاثنان يمكنهما التعايش في تطبيق واحد) لكنه في الأساس في وضع الصيانة.
يمثل App Router العمارة الحالية لـ Next.js (Server Components وnested layouts وstreaming).
معرفة كيف يختلف عن Pages Router القديم — خاصة الافتراضي الموجه نحو الخادم وموديل التخطيط — ضروري للعمل في أي codebase حديث في Next.js.