React Academy · درس

اصطلاحات ملفات App Router

افهم دليل app/ وملفات page.tsx وlayout.tsx وloading.tsx وerror.tsx.

اصطلاحات ملفات App Router درس مجاني في React Academy على CoddyKit. هذا هو الدرس 1 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في React Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة React Academy 4 دروس في المجموع.

مجلد app/

يستخدم App Router في Next.js مجلد app/. وتحدّد المجلدات أجزاء عنوان URL، بينما تحدّد الملفات الخاصة داخل المجلدات السلوك لكل جزء.

page.tsx — واجهة المسار

يصدّر page.tsx مكوّن React الذي يُعرَض لجزء من عنوان URL. ومن دون page.tsx، لا يكون المسار متاحاً للعامة.

// app/dashboard/page.tsx
export default function DashboardPage() {
  return <h1>Dashboard</h1>;
}
// → accessible at /dashboard

layout.tsx — الأغلفة المستمرة

يغلّف layout.tsx مسارات الأبناء. ويستمر عبر عمليات التنقل، فلا تتم إعادة ضبط حالته عند تغيّر مسار الابن.

// app/layout.tsx (root layout — required)
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <Header />
        {children}
        <Footer />
      </body>
    </html>
  );
}

loading.tsx — واجهة تحميل فورية

يعرض loading.tsx محتوىً فورًا أثناء تحميل البيانات غير المتزامنة للصفحة. وهو يغلّف الصفحة تلقائيًا داخل حدّ Suspense.

// app/dashboard/loading.tsx
export default function Loading() {
  return <Skeleton />;
}
// Shown while dashboard/page.tsx is fetching

error.tsx — حدود الأخطاء

يمثّل error.tsx حدّ أخطاء في React لهذا المقطع. ويتلقى الخطأ ودالة reset لإعادة المحاولة.

'use client';

export default function Error({ error, reset }: { error: Error; reset: () => void }) {
  return (
    <div>
      <p>Something went wrong: {error.message}</p>
      <button onClick={reset}>Try again</button>
    </div>
  );
}

not-found.tsx — واجهة 404

يُعرض not-found.tsx عند استدعاء notFound() من مكوّن خادم، أو عند عدم تطابق أي مسار.

// app/not-found.tsx
export default function NotFound() {
  return (
    <div>
      <h2>404 — Page not found</h2>
      <Link href="/">Go home</Link>
    </div>
  );
}

template.tsx — تخطيطات يُعاد تركيبها

يشبه template.tsx ملف layout.tsx، لكنه ينشئ مثيلًا جديدًا عند كل عملية تنقل، لذلك تُعاد ضبط الحالة وتُشغّل التأثيرات من جديد. استخدمه للرسوم المتحركة أو التحليلات.

// app/shop/template.tsx
export default function ShopTemplate({ children }: { children: React.ReactNode }) {
  return <div className="shop-fade-in">{children}</div>;
}

route.ts — مسارات API

يصدّر route.ts، وليس route.tsx، معالجات أساليب HTTP مثل GET وPOST لإنشاء نقاط نهاية API داخل المجلد app/.

// app/api/users/route.ts
export async function GET() {
  const users = await getUsers();
  return Response.json(users);
}

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

middleware.ts — برمجية وسيطة على Edge

يعمل middleware.ts الموجود في جذر المشروع قبل كل طلب مطابق على Edge، ويُستخدم للتحقق من المصادقة وإعادة التوجيه وإعادة كتابة الرؤوس.

// middleware.ts
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export function middleware(request: NextRequest) {
  const token = request.cookies.get('token');
  if (!token) return NextResponse.redirect(new URL('/login', request.url));
  return NextResponse.next();
}

export const config = { matcher: ['/dashboard/:path*'] };

التجاور

يمكنك وضع الملفات التي لا تمثّل مسارات، مثل المكوّنات والأدوات والاختبارات، معًا داخل مجلدات app/. ولا تُعامل كمقاطع مسارات إلا الملفات التي تحمل أسماء الاصطلاحات الخاصة، مثل page وlayout وغيرها.

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

يمكن أن يحتوي كل مجلد على ملف layout.tsx خاص به. ويغلّف التخطيط المتداخل أبناء مقطعه فقط، مع تكوينه مع التخطيط الأب الموجود فوقه.

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

تحقق سريع

أي ملف في App Router يوفّر بديل Suspense تلقائيًا أثناء تحميل البيانات غير المتزامنة للصفحة؟

مراجعة

يستخدم App Router ملفات خاصة: page.tsx لواجهة المسار، وlayout.tsx للغلاف المستمر، وloading.tsx لبديل Suspense، وerror.tsx لحدّ الأخطاء، وnot-found.tsx لواجهة 404، وroute.ts لـ API، وmiddleware.ts لمنطق Edge.

الأسئلة الشائعة

هل درس «اصطلاحات ملفات App Router» مجاني؟

نعم — نص درس «اصطلاحات ملفات App Router» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة React Academy، انتقل إلى CoddyKit PRO. تتضمن دورة React Academy 4 دروس في المجموع.

ماذا ستتعلم في «اصطلاحات ملفات App Router»؟

افهم دليل app/ وملفات page.tsx وlayout.tsx وloading.tsx وerror.tsx. تتمرن على React Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ React Academy؟

لا تُشترط خبرة سابقة. React Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 4.

كم من الوقت يستغرق درس «اصطلاحات ملفات App Router»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس React Academy هذا؟

نعم. كل درس في React Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

اصطلاحات ملفات App Router
مكوّنات الخادم مقابل مكوّنات العميل في Next.js
المسارات الديناميكية ومجموعات المسارات
واجهة Metadata API وتحسين محركات البحث في App Router

← العودة إلى React Academy