موجّه Pages مقابل موجّه App

موجهان وإطار عمل واحد

Pages Router — التوجيه القائم على الملفات

pages/
  index.tsx        // route: /
  about.tsx        // route: /about
  blog/
    index.tsx      // route: /blog
    [slug].tsx     // route: /blog/:slug
  api/
    users.ts       // API route: /api/users

Pages Router — جلب البيانات

// pages/posts/[slug].tsx
export async function getStaticPaths() {
  const slugs = await fetchAllSlugs();
  return { paths: slugs.map(s => ({ params: { slug: s } })), fallback: false };
}

export async function getStaticProps({ params }) {
  const post = await fetchPost(params.slug);
  return { props: { post }, revalidate: 60 };
}

export default function Post({ post }) {
  return <article>{post.body}</article>;
}

App Router — التوجيه القائم على المجلدات

app/
  layout.tsx       // shared root layout
  page.tsx         // route: /
  about/
    page.tsx       // route: /about
  blog/
    page.tsx       // route: /blog
    [slug]/
      page.tsx     // route: /blog/:slug

App Router — الملفات الخاصة

التخطيطات المتداخلة

// app/dashboard/layout.tsx
export default function DashboardLayout({ children }) {
  return (
    <div className="dashboard">
      <Sidebar />
      <main>{children}</main>
    </div>
  );
}

// app/dashboard/settings/page.tsx renders inside the Sidebar layout

جلب البيانات في App Router

// app/posts/[slug]/page.tsx (Server Component by default)
export default async function Post({ params }) {
  const post = await fetch(`https://api/posts/${params.slug}`, {
    next: { revalidate: 60 } // ISR-like caching
  }).then(r => r.json());
  return <article>{post.body}</article>;
}

مكونات العميل في App Router

// app/Counter.tsx
'use client';
import { useState } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(c => c + 1)}>{count}</button>;
}

مسارات API مقابل معالجات المسارات

// app/api/users/route.ts
export async function GET(request: Request) {
  const users = await db.users.findMany();
  return Response.json(users);
}

export async function POST(request: Request) {
  const body = await request.json();
  const user = await db.users.create({ data: body });
  return Response.json(user, { status: 201 });
}

استراتيجية الترحيل

متى تستخدم أيًّا منهما

تحقق سريع

مراجعة: Pages Router مقابل App Router