Next.js: توجيه App Router بنظام الملفات

src/app/
├── page.tsx                    # → /
├── about/
│   └── page.tsx                # → /about
├── products/
│   ├── page.tsx                # → /products
│   └── [id]/
│       ├── page.tsx            # → /products/1, /products/2
│       └── reviews/
│           └── page.tsx        # → /products/1/reviews
└── api/
    └── products/
        └── route.ts            # → /api/products (GET/POST)

مخطط: page.tsx; /; about/page.tsx; /about; products/page.tsx; /products.

// ============================================
// إنشاء صفحة /about
// الملف:src/app/about/page.tsx
// فقط قم بإنشاء ملف، وسيتم تسجيل التوجيه تلقائيًا
// ============================================

export default function AboutPage() {
  return (
    <div className="max-w-2xl mx-auto p-8">
      <h1 className="text-3xl font-bold">حول TaskFlow</h1>
      <p className="mt-4 text-gray-600 leading-relaxed">
        TaskFlow هي منصة تعاونية لإدارة المشاريع تساعد
        الفرق على التخطيط والتتبع وتسليم المشاريع بكفاءة. مبنية
        بـ Next.js 16 و React 19، وتوفر تحديثات فورية وتعاون
        سلس وأمان على مستوى المؤسسات.
      </p>
      <div className="mt-8 grid grid-cols-3 gap-4">
        <div className="p-4 bg-blue-50 rounded-lg text-center">
          <div className="text-2xl font-bold text-blue-600">10K+</div>
          <div className="text-sm text-gray-500">مستخدم نشط</div>
        </div>
        <div className="p-4 bg-green-50 rounded-lg text-center">
          <div className="text-2xl font-bold text-green-600">50K+</div>
          <div className="text-sm text-gray-500">مشروع</div>
        </div>
        <div className="p-4 bg-purple-50 rounded-lg text-center">
          <div className="text-2xl font-bold text-purple-600">99.9%</div>
          <div className="text-sm text-gray-500">وقت التشغيل</div>
        </div>
      </div>
    </div>
  );
}

المحتوى: حول TaskFlow | TaskFlow هي منصة تعاونية | 10K+ | مستخدم نشط

زر http://localhost:3000/about لترى:
حول TaskFlow
TaskFlow هي منصة تعاونية لإدارة المشاريع...
10K+  مستخدم نشط | 50K+  مشروع | 99.9%  وقت التشغيل

مخطط: app/products; page.tsx → /products; [id; page.tsx → /products/1; /products/2.

// ============================================
// صفحة تفاصيل المنتج — توجيه ديناميكي [id]
// الملف:src/app/products/[id]/page.tsx
// ============================================

// في Next.js 16، params هو Promise (غير متزامن)
export default async function ProductPage({
  params,
}: {
  params: Promise<{ id: string }>;
}) {
  const { id } = await params;
  const product = await fetch(`https://fakestoreapi.com/products/${id}`);

  return (
    <div className="container mx-auto p-8">
      <div className="flex gap-8">
        <img
          src={product.image}
          alt={product.title}
          className="w-80 h-80 object-contain"
        />
        <div>
          <h1 className="text-2xl font-bold">{product.title}</h1>
          <p className="text-xl text-green-600 font-bold mt-2">
            ${product.price}
          </p>
          <p className="text-sm text-gray-500 mt-1">
            الفئة: {product.category}
          </p>
          <p className="mt-4 text-gray-700">{product.description}</p>
        </div>
      </div>
    </div>
  );
}

مكون الخادم يجلب البيانات ويعرضها.

زر /products/1 لترى:
Fjallraven - Foldsack No. 1 Backpack
$109.95
الفئة: men's clothing
حقيبتك المثالية للرحلات اليومية والمشي...

مخطط: app/docs; [...slug; page.tsx; /docs/getting-started; /docs/guides/installation; /docs/api/authentication/overview.

// ============================================
// توجيه الالتقاط الشامل — صفحات توثيق متعددة المستويات
// الملف:src/app/docs/[...slug]/page.tsx
// ============================================

export default async function DocsPage({
  params,
}: {
  params: Promise<{ slug: string[] }>;
}) {
  const { slug } = await params;

  return (
    <div className="container mx-auto p-8">
      <nav className="text-sm text-gray-500 mb-4">
        الرئيسية / Docs / {slug.join(" / ")}
      </nav>
      <h1 className="text-3xl font-bold">Docs: {slug.join(" > ")}</h1>
      <div className="mt-8 p-6 bg-yellow-50 border border-yellow-200 rounded-lg">
        <p className="font-medium">أنت تشاهد توثيق:</p>
        <ul className="mt-2 list-disc list-inside">
          {slug.map((segment, index) => (
            <li key={index}>
              المستوى {index + 1}: <code className="bg-gray-100 px-2 py-0.5 rounded">{segment}</code>
            </li>
          ))}
        </ul>
      </div>
      <p className="mt-4 text-gray-600">
        إجمالي العمق: {slug.length} مستويات
      </p>
    </div>
  );
}

DocsPage يعرض واجهته.

زر /docs/getting-started/installation لترى:
الرئيسية / Docs / getting-started / installation
Docs: getting-started > installation

أنت تشاهد توثيق:
  - المستوى 1: getting-started
  - المستوى 2: installation
إجمالي العمق: 2 مستويات

مخطط: app/categories; [[...catchAll; page.tsx; /categories; /categories/electronics; /categories/electronics/phones.

// ============================================
// الالتقاط الشامل الاختياري — صفحة تصفح الفئات
// الملف:src/app/categories/[[...categories]]/page.tsx
// كل من /categories و /categories/electronics يعملان
// ============================================

export default async function CategoriesPage({
  params,
}: {
  params: Promise<{ categories?: string[] }>;
}) {
  const { categories } = await params;

  const allProducts = await fetch("https://fakestoreapi.com/products");
  const categoriesList = [...new Set(allProducts.map(p => p.category))];

  const filteredProducts = categories
    ? allProducts.filter(p => p.category === categories[0])
    : allProducts;

  return (
    <div className="container mx-auto p-8">
      <h1 className="text-3xl font-bold mb-6">
        {categories ? `الفئة: ${categories[0]}` : "جميع الفئات"}
      </h1>

      {!categories && (
        <div className="flex gap-2 mb-8 flex-wrap">
          {categoriesList.map(cat => (
            <a
              key={cat}
              href={`/categories/${encodeURIComponent(cat)}`}
              className="px-4 py-2 bg-gray-100 rounded-full hover:bg-blue-100"
            >
              {cat}
            </a>
          ))}
        </div>
      )}

      <div className="grid grid-cols-4 gap-6">
        {filteredProducts.slice(0, 8).map(p => (
          <div key={p.id} className="border rounded-lg p-4 hover:shadow-lg">
            <img src={p.image} alt={p.title} className="h-40 mx-auto" />
            <p className="mt-2 font-medium text-sm truncate">{p.title}</p>
            <p className="text-green-600 font-bold">${p.price}</p>
          </div>
        ))}
      </div>
    </div>
  );
}

جلب البيانات من جانب الخادم يعرض قائمة العناصر.

زر /categories لترى:
جميع أزرار الفئات(electronics, jewelery, men's clothing, women's clothing)

زر /categories/electronics لترى:
الفئة: electronics
عرض منتجات electronics فقط(8 بطاقات منتج)

مخطط: تنقل المستخدم; loading.tsx عرض هيكلي; page.tsx البيانات جاهزة; صفحة كاملة.

// ============================================
// شاشة هيكلية للتحميل — تُعرض أثناء جلب بيانات الصفحة
// الملف:src/app/products/loading.tsx
// ============================================

export default function ProductsLoading() {
  return (
    <div className="container mx-auto p-8">
      <div className="h-8 w-48 bg-gray-200 rounded animate-pulse mb-6" />
      <div className="grid grid-cols-4 gap-6">
        {Array.from({ length: 8 }).map((_, i) => (
          <div key={i} className="border rounded-lg p-4">
            <div className="h-40 bg-gray-200 rounded animate-pulse" />
            <div className="h-4 bg-gray-200 rounded mt-2 animate-pulse" />
            <div className="h-4 w-16 bg-gray-200 rounded mt-2 animate-pulse" />
          </div>
        ))}
      </div>
    </div>
  );
}

يعرض قائمة عناصر باستخدام .map().

عند زيارة /products، يُعرض حتى اكتمال تحميل البيانات:
8 بطاقات رمادية وهمية(متحركة بنبضات)
بعد انتهاء تحميل البيانات، يُستبدل المحتوى الوهمي تلقائيًا بالمحتوى الفعلي
بدون وميض، بدون شاشة بيضاء، انتقال سلس

تُعرض الصفحة كما هو موصوف أعلاه، مع تحديث الواجهة بناءً على السلوك الموصوف.

// ============================================
// Error Boundary — التقاط أخطاء المكونات الفرعية
// الملف:src/app/products/error.tsx
// ============================================

'use client';

export default function ProductsError({
  error,
  reset,
}: {
  error: Error & { digest?: string };
  reset: () => void;
}) {
  return (
    <div className="container mx-auto p-8 text-center">
      <div className="max-w-md mx-auto">
        <h2 className="text-2xl font-bold text-red-600 mb-4">
          حدث خطأ ما!
        </h2>
        <p className="text-gray-600 mb-6">
          {error.message || "فشل تحميل المنتجات. يرجى المحاولة مرة أخرى."}
        </p>
        <button
          onClick={reset}
          className="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700"
        >
          حاول مرة أخرى
        </button>
      </div>
    </div>
  );
}

المحتوى: حدث خطأ ما! | حاول مرة أخرى

عند فشل جلب البيانات من صفحة المنتج، يُعرض:
حدث خطأ ما!
فشل تحميل المنتجات. يرجى المحاولة مرة أخرى.
[حاول مرة أخرى] زر → اضغط لإعادة المحاولة تلقائيًا

// ============================================
// مثال شامل: نظام تصفح منتجات التجارة الإلكترونية
// يغطي الصفحات والتخطيط والتحميل والخطأ وتوجيه API
// ============================================

// src/app/layout.tsx — تخطيط الجذر
export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body className="bg-gray-50">
        <nav className="bg-white shadow-sm p-4">
          <a href="/" className="text-xl font-bold text-blue-600">
            ShopHub
          </a>
        </nav>
        <main>{children}</main>
      </body>
    </html>
  );
}

// src/app/page.tsx — الصفحة الرئيسية
export default function HomePage() {
  return (
    <div className="container mx-auto p-8 text-center">
      <h1 className="text-4xl font-bold">مرحبًا بك في ShopHub</h1>
      <p className="mt-4 text-gray-600">
        تصفح مجموعتنا من المنتجات الرائعة.
      </p>
      <a
        href="/products"
        className="inline-block mt-6 px-8 py-3 bg-blue-600 text-white rounded-lg"
      >
        تصفح المنتجات
      </a>
    </div>
  );
}

// src/app/products/page.tsx — قائمة المنتجات
export default async function ProductsPage() {
  const products = await fetch(
    "https://fakestoreapi.com/products"
  );

  return (
    <div className="container mx-auto p-8">
      <h1 className="text-3xl font-bold mb-6">جميع المنتجات</h1>
      <div className="grid grid-cols-4 gap-6">
        {products.map(p => (
          <a
            key={p.id}
            href={`/products/${p.id}`}
            className="border rounded-lg p-4 bg-white hover:shadow-lg"
          >
            <img
              src={p.image}
              alt={p.title}
              className="h-40 mx-auto"
            />
            <p className="mt-2 font-medium text-sm">{p.title}</p>
            <p className="text-green-600 font-bold mt-1">${p.price}</p>
          </a>
        ))}
      </div>
    </div>
  );
}

// src/app/products/[id]/page.tsx — تفاصيل المنتج
export default async function ProductDetailPage({
  params,
}: {
  params: Promise<{ id: string }>;
}) {
  const { id } = await params;
  const product = await fetch(
    `https://fakestoreapi.com/products/${id}`
  );

  if (!product) {
    notFound();
  }

  return (
    <div className="container mx-auto p-8">
      <a
        href="/products"
        className="text-blue-600 hover:underline mb-4 inline-block"
      >
        &larr; العودة إلى المنتجات
      </a>
      <div className="flex gap-8 bg-white p-8 rounded-lg shadow">
        <img
          src={product.image}
          alt={product.title}
          className="w-96 h-96 object-contain"
        />
        <div>
          <h1 className="text-3xl font-bold">{product.title}</h1>
          <p className="text-2xl text-green-600 font-bold mt-4">
            ${product.price}
          </p>
          <p className="mt-6 text-gray-700 leading-relaxed">
            {product.description}
          </p>
          <button className="mt-6 px-8 py-3 bg-blue-600 text-white rounded-lg">
            أضف إلى السلة
          </button>
        </div>
      </div>
    </div>
  );
}

// src/app/products/loading.tsx — شاشة هيكلية للتحميل
export default function ProductsLoading() {
  return (
    <div className="container mx-auto p-8">
      <div className="h-8 w-48 bg-gray-200 rounded animate-pulse mb-6" />
      <div className="grid grid-cols-4 gap-6">
        {Array.from({ length: 8 }).map((_, i) => (
          <div key={i} className="border rounded-lg p-4 bg-white">
            <div className="h-40 bg-gray-200 rounded animate-pulse" />
            <div className="h-4 bg-gray-200 rounded mt-2 animate-pulse" />
            <div className="h-4 w-16 bg-gray-200 rounded mt-2 animate-pulse" />
          </div>
        ))}
      </div>
    </div>
  );
}

// src/app/products/error.tsx — Error Boundary
'use client';
export default function ProductsError({
  error,
  reset,
}: {
  error: Error;
  reset: () => void;
}) {
  return (
    <div className="container mx-auto p-8 text-center">
      <h2 className="text-2xl font-bold text-red-600">
        فشل تحميل المنتجات
      </h2>
      <button
        onClick={reset}
        className="mt-4 px-6 py-2 bg-blue-600 text-white rounded-lg"
      >
        حاول مرة أخرى
      </button>
    </div>
  );
}

الصفحة الرئيسية(/):
  مرحبًا بك في ShopHub → [تصفح المنتجات]

قائمة المنتجات(/products):
  جارٍ التحميل... → 8 بطاقات هيكلية رمادية
  اكتمل التحميل → شبكة بطاقات المنتج(تشمل الصور والعنوان والسعر)

تفاصيل المنتج(/products/1):
  صورة المنتج (يسار) + العنوان/السعر/الوصف/أضف إلى السلة (يمين)
  ← العودة إلى المنتجات رابط العودة إلى القائمة

حالة الخطأ:
  فشل تحميل المنتجات
  [حاول مرة أخرى] زر

حالة 404:
  تُعالج تلقائيًا من not-found.tsx الجذر