ما الجديد في App Router؟

Next.js 14 يستخدم App Router افتراضياً. يدعم Server Components ويحسن الأداء بشكل كبير.

هيكل المشروع

app/
├── layout.tsx      # Layout مشترك
├── page.tsx        # الصفحة الرئيسية
├── about/
│   └── page.tsx    # /about
└── blog/
    ├── page.tsx    # /blog
    └── [slug]/
        └── page.tsx  # /blog/:slug

Server vs Client Components

// Server Component (افتراضي)
async function ProductList() {
  const products = await fetchProducts();
  return 
{products.map(p => 
{p.name}
)}
;
}

// Client Component
'use client';
function Counter() {
  const [count, setCount] = useState(0);
  return ;
}

Data Fetching

Server Components تجلب البيانات مباشرة بدون useEffect. أسرع وأبسط.

الخلاصة

App Router يغير طريقة بناء تطبيقات React. Server Components تحسن الأداء بشكل كبير.