Next.js 15 Fullstack (App Router + Server Actions) · درس

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

نفّذ حالات التحميل باستخدام `loading.js` وتعامل بأناقة مع الأخطاء باستخدام حدود `error.js` في تطبيقك

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

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

Why Loading States Matter

When your Next.js application fetches data, it can take some time. Without any visual feedback, users might think the app is frozen or broken.

Improve User Experience: Keep users informed.
Reduce Frustration: Prevent perceived slowness.
Indicate Progress: Show that something is happening in the background.

Introducing `loading.js`

Next.js App Router provides a special file convention, loading.js, to automatically create a loading UI for a route segment.

When data is being fetched for a page.js or layout.js file, Next.js automatically displays the UI defined in its nearest loading.js sibling or ancestor.

Creating a Simple Loading UI

To create a loading UI, simply add a loading.js file inside a route segment folder. It should export a default React component.

This component will be rendered instantly when the segment is loading.

export default function Loading() {
  return (
    <div style={{ padding: '20px', textAlign: 'center' }}>
      <h2>Loading...</h2>
      <p>Please wait while we fetch the content.</p>
    </div>
  );
}

How `loading.js` Works

Under the hood, loading.js works with React Suspense. Next.js wraps the corresponding page.js and its nested children in a Suspense Boundary.

When any data fetching inside that boundary is pending, the loading.js component is shown as a fallback.

Nested Loading States

You can have multiple loading.js files at different levels of your route. For example, a global loading UI and a more specific one for a sub-route.

Next.js will show the closest ancestor loading.js for the segment that is currently loading.

Handling Application Errors

Just like loading states, errors are a part of any application. Uncaught errors can crash your app, leading to a poor user experience.

Next.js App Router provides a way to gracefully handle errors and display a custom error UI using error.js.

Introducing `error.js`

The error.js file convention allows you to define an error UI that automatically wraps a route segment and its children in a React Error Boundary.

This boundary catches errors that occur during rendering, in event handlers, and in data fetching within its scope.

Creating a Basic Error UI

Similar to loading.js, create an error.js file in a route segment. It must be a React Client Component (use 'use client'; at the top).

It receives error (the error object) and a reset function as props.

'use client';

import { useEffect } from 'react';

export default function Error({ error, reset }) {
  useEffect(() => {
    // Log the error to an error reporting service
    console.error(error);
  }, [error]);

  return (
    <div style={{ padding: '20px', textAlign: 'center', color: 'red' }}>
      <h2>Something went wrong!</h2>
      <button
        onClick={() => reset()} // Attempt to re-render the segment
        style={{ marginTop: '10px', padding: '8px 15px' }}
      >
        Try again
      </button>
    </div>
  );
}

Error Recovery with `reset()`

The reset() function provided to your error.js component is crucial. When called, it attempts to re-render the entire segment that threw the error.

This allows users to try again without navigating away, potentially resolving transient issues.

Quick Check on UI Files

Which statement accurately describes the primary purpose of loading.js in Next.js App Router?

Recap: Loading & Error UI

In this lesson, you learned how to enhance your Next.js application's user experience by implementing visual feedback for loading and error states.

loading.js: Displays a temporary UI while data is being fetched, using React Suspense.
error.js: Catches errors in a segment and displays a fallback UI, allowing users to attempt recovery with the reset() function.

These conventions help create more robust and user-friendly Next.js applications.

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

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

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

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

نفّذ حالات التحميل باستخدام `loading.js` وتعامل بأناقة مع الأخطاء باستخدام حدود `error.js` في تطبيقك تتمرن على Next.js 15 Fullstack (App Router + Server Actions) مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Next.js 15 Fullstack (App Router + Server Actions)؟

لا تُشترط خبرة سابقة. Next.js 15 Fullstack (App Router + Server Actions) على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 3 من أصل 4.

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

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

هل يمكنني كتابة وتشغيل أكواد في درس Next.js 15 Fullstack (App Router + Server Actions) هذا؟

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

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

← العودة إلى Next.js 15 Fullstack (App Router + Server Actions)