Next.js 15 Fullstack Web Apps · درس

اصطلاحات واجهة التحميل والأخطاء

استخدم اصطلاحات ملفات App Router، وهي loading.js وerror.js وnot-found.js، لبناء مسارات متينة ومتدفقة مع بدائل سلسة عند حدوث المشكلات.

الدرس 4 من 413 خطوة

اصطلاحات واجهة التحميل والأخطاء درس مجاني في Next.js 15 Fullstack Web Apps على CoddyKit. هذا هو الدرس 4 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Next.js 15 Fullstack Web Apps، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Next.js 15 Fullstack Web Apps 4 دروس في المجموع.

بعض أجزاء هذا الدرس لم تُترجم بعد وتظهر باللغة الإنجليزية.

Why Loading and Error UI Matter

Advanced routing is not only about where a route lives but about what users see while it resolves or fails. The App Router gives you special files that wrap segments automatically.

loading.js renders an instant fallback while the segment streams.
error.js catches runtime errors in that segment.
not-found.js renders when notFound() is called.

The loading.js Convention

A loading.js file in a segment folder is automatically wrapped around page.js in a React Suspense boundary. While the server component awaits data, the loading UI shows instantly.

export default function Loading() {
  return <div className="spinner">Loading dashboard...</div>;
}

Skeletons Beat Spinners

For perceived performance, render a skeleton that mirrors the final layout instead of a generic spinner. It reduces layout shift and feels faster.

export default function Loading() {
  return (
    <ul>
      {Array.from({ length: 5 }).map((_, i) => (
        <li key={i} className="skeleton-row" />
      ))}
    </ul>
  );
}

Streaming with Suspense

Because loading.js is just Suspense under the hood, the rest of the layout renders immediately while only the slow segment streams in. You can also nest your own Suspense boundaries inside a page for finer control.

import { Suspense } from 'react';

export default function Page() {
  return (
    <section>
      <h1>Reports</h1>
      <Suspense fallback={<p>Loading chart...</p>}>
        <SlowChart />
      </Suspense>
    </section>
  );
}

The error.js Convention

error.js must be a Client Component. It receives the thrown error and a reset function to retry rendering the segment.

'use client';

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

Error Boundaries Are Scoped

An error.js catches errors in its segment and its children, but not in the layout at the same level. To catch layout errors, place the error file one level up.

Errors bubble up to the nearest parent boundary.
The root layout cannot be caught by a sibling error file.

global-error.js for the Root

To catch errors in the root layout itself, add global-error.js. It replaces the entire document, so it must render its own <html> and <body> tags.

'use client';

export default function GlobalError({ error, reset }) {
  return (
    <html>
      <body>
        <h2>App crashed</h2>
        <button onClick={() => reset()}>Reload</button>
      </body>
    </html>
  );
}

Triggering not-found.js

Call notFound() from next/navigation inside a server component to render the nearest not-found.js and send a 404 status.

import { notFound } from 'next/navigation';

export default async function Page({ params }) {
  const post = await getPost(params.id);
  if (!post) notFound();
  return <article>{post.title}</article>;
}

Custom not-found.js UI

Place not-found.js in any segment to override the default 404 for that part of the route tree. A root-level one acts as the global 404 page.

import Link from 'next/link';

export default function NotFound() {
  return (
    <div>
      <h2>Post not found</h2>
      <Link href="/blog">Back to blog</Link>
    </div>
  );
}

Combining the Conventions

A robust segment folder often contains all four files working together:

page.js — the content
loading.js — streamed fallback
error.js — runtime failure recovery
not-found.js — missing resource

Each is wired up automatically by the App Router with no manual provider setup.

Logging Errors in Production

Use a useEffect inside error.js to report errors to your monitoring service while still showing recovery UI to the user.

'use client';
import { useEffect } from 'react';

export default function Error({ error, reset }) {
  useEffect(() => {
    reportToSentry(error);
  }, [error]);
  return <button onClick={reset}>Retry</button>;
}

Quick Check

Which statement about error.js in the App Router is correct?

أجب عليها في الدرس التفاعلي

Recap

You learned the App Router's resilience conventions:

loading.js wraps segments in Suspense for instant streamed fallbacks.
error.js (Client Component) recovers from runtime errors with reset.
global-error.js catches root-layout failures.
not-found.js renders when notFound() is called.

Together they make advanced routes graceful under load and failure.

البدء مجانًا

تعلم TypeScript مع معلم ذكاء اصطناعي — مجانًا

اكتب وقم بتشغيل أكوادك الفعلية في المتصفح، واحصل على مساعدة فورية من معلم ذكاء اصطناعي متاح 24/7، واستمر من حيث توقفت على الويب أو في التطبيق.

الدورات: 12
الدروس: 48

ابدأ التعلم مجانًا عرض الدورة الكاملة

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

هل درس «اصطلاحات واجهة التحميل والأخطاء» مجاني؟

نعم — نص درس «اصطلاحات واجهة التحميل والأخطاء» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Next.js 15 Fullstack Web Apps، انتقل إلى CoddyKit PRO. تتضمن دورة Next.js 15 Fullstack Web Apps 4 دروس في المجموع.

ماذا ستتعلم في «اصطلاحات واجهة التحميل والأخطاء»؟

استخدم اصطلاحات ملفات App Router، وهي loading.js وerror.js وnot-found.js، لبناء مسارات متينة ومتدفقة مع بدائل سلسة عند حدوث المشكلات. تتمرن على Next.js 15 Fullstack Web Apps مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Next.js 15 Fullstack Web Apps؟

لا تُشترط خبرة سابقة. Next.js 15 Fullstack Web Apps على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 4 من أصل 4.

كم من الوقت يستغرق درس «اصطلاحات واجهة التحميل والأخطاء»؟

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

هل يمكنني كتابة وتشغيل أكواد في درس Next.js 15 Fullstack Web Apps هذا؟

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

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

← العودة إلى Next.js 15 Fullstack Web Apps