Next.js 15: App Router vs Pages Router — دليل شامل من الميدان

# Next.js 15: App Router vs Pages Router — دليل شامل من الميدان

Last month، I ran into a problem that cost us two days at Beyin. كنا نبني متجر إلكتروني لعميل في أبوظبي، واخترت Pages Router للسرعة. بعد أسبوع، اكتشفت إننا محتاجين Server Components للـ SEO—وكان لازم نعيد كتابة كل حاجة.

Why This Matters (and Why I Care)

صراحة، لو كنت بدأت بـ App Router من البداية، كنت وفرت 40% من وقت التطوير. Pages Router كان رائع—بس Next.js 15 جعلته اختيار للـ legacy. الفرق الحقيقي مش في الـ syntax، بل في طريقة التفكير: App Router يجبرك تتبنى React Server Components، وهذا يغير كل شي.

The Core Difference

App Router يستخدم `layout.tsx` + `page.tsx` بدلاً من `_app.tsx` القديم.

// App Router pattern — what we use now at Beyin

// app/products/page.tsx

export default async function ProductsPage() {

const products = await fetchProducts() // runs on server

return <ProductList products={products} />

}

// Pages Router — old way

// pages/products.tsx

export async function getServerSideProps() {

const products = await fetchProducts()

return { props: { products } }

}

Mistakes I Made

1. **خلطت بينهم في نفس المشروع** — Pages Router و App Router ما يشتغلون مع بعض بسهولة. اختر واحد من البداية.

2. **نسيت الـ loading.tsx** — في App Router، كل page تحتاج ملف `loading.tsx` منفصل. نسيتها وخسرت UX رهيب.

3. **استخدمت useEffect بدون داعي** — مع RSC، كثير من fetching يتم على السيرفر. وفرت 3 خطوات.

My Honest Take

Pages Router مستقر وممتاز للمشاريع الصغيرة. لكن لأي مشروع جديد—خاصة مع SEO أو data fetching معقد—App Router هو الخيار الوحيد المنطقي. Next.js 15 جعل Pages Router اختيار ثانوي، وصراحة، هذا صحيح.

---

*Mohamed Qurashi | Full-Stack Developer at Beyin Digital | [qurashi.dev](https://qurashi.dev)*

---

**Further reading:**

**Related articles on this blog:**