جاري التحميل...
جاري التحميل...
error.js، not-found.js، global-error.js، Error Boundaries
في تطبيقات الإنتاج، قد تنفصل قواعد البيانات، ويفشل الشبكات، وقد يدخل المستخدمون روابط خاطئة. بدون معالجة أخطاء مناسبة، يرى المستخدمون شاشات بيضاء فارغة.
Next.js يوفر نظاماً شاملاً لمعالجة الأخطاء من خلال اتفاقيات الملفات التي تسمح التقاط الأخطاء وعرض واجهات مستخدم ودية.
ملف error.js هو اتفاقية ملف في Next.js تُستخدم لإنشاء حدود الأخطاء التي تلتقط الأخطاء في أجزاء المسارات.
عندما يحدث خطأ في صفحة، يقوم error.js التقاطه وعرض واجهة بديلة بدلاً من إيقاف تشغيل التطبيق بالكامل.
ملف not-found.js يتعامل مع أخطاء 404 عندما لا تُوجد الصفحة. يمكنك تشغيله يدوياً باستخدام notFound() من next/navigation.
ماذا يفعل error.js في Next.js؟
كيف تُشغّل صفحة 404 يدوياً؟
أضف error.js و not-found.js إلى مساراتك مع واجهة بديلة مناسبة.
الحل:
// نموذج error.js رئيسي
"use client";
export default function Error({ error, reset }) {
return (
<div className="flex flex-col items-center justify-center min-h-[50vh] p-8">
<div className="text-6xl mb-4">⚠️</div>
<h2 className="text-2xl font-bold text-gray-800 mb-2">
حدث خطأ غير متوقع
</h2>
<p className="text-gray-600 mb-6 text-center max-w-md">
نعتذر، واجهنا مشكلة. يرجى المحاولة مرة أخرى.
</p>
<button
onClick={() => reset()}
className="px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition"
>
حاول مرة أخرى
</button>
</div>
);
}
// نموذج not-found.js مخصص
import Link from "next/link";
export default function NotFound() {
return (
<div className="flex flex-col items-center justify-center min-h-[60vh] p-8">
<h1 className="text-8xl font-bold text-gray-300 mb-4">404</h1>
<h2 className="text-2xl font-bold text-gray-800 mb-2">
الصفحة غير موجودة
</h2>
<p className="text-gray-600 mb-6 text-center max-w-md">
عذراً، الصفحة التي تبحث عنها غير موجودة.
</p>
<Link
href="/"
className="px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition"
>
العودة إلى الصفحة الرئيسية
</Link>
</div>
);
}
// نموذج global-error.js
"use client";
export default function GlobalError({ error, reset }) {
return (
<html lang="ar" dir="rtl">
<body>
<div className="flex flex-col items-center justify-center min-h-screen p-8">
<h2 className="text-3xl font-bold text-red-600 mb-4">
خطأ عام في التطبيق
</h2>
<p className="text-gray-600 mb-6">
حدث خطأ غير متوقع في التطبيق بالكامل.
</p>
<button
onClick={() => reset()}
className="px-6 py-3 bg-red-600 text-white rounded-lg hover:bg-red-700"
>
إعادة تحميل التطبيق
</button>
</div>
</body>
</html>
);
}error.js
"use client";
export default function Error({ error, reset }) {
return (
<div>
<h2>خطأ!</h2>
<p>{error.message}</p>
<button onClick={reset}>إعادة المحاولة</button>
</div>
);
}not-found.js
import Link from "next/link";
export default function NotFound() {
return (
<div>
<h2>404 - الصفحة غير موجودة</h2>
<Link href="/">العودة للرئيسية</Link>
</div>
);
}global-error.js
"use client";
export default function GlobalError({ error, reset }) {
return (
<html lang="ar">
<body>
<h2>خطأ عام</h2>
<button onClick={reset}>إعادة التحميل</button>
</body>
</html>
);
}notFound() & redirect():
import { notFound } from "next/navigation";
export default async function Page({ params }) {
const data = await fetchData(params.id);
if (!data) notFound();
return <div>{data.title}</div>;
}
import { redirect } from "next/navigation";
async function getData() {
try {
const res = await fetch(url);
if (!res.ok) throw new Error("Failed");
return res.json();
} catch {
redirect("/error");
}
}كيف تتعامل مع الأخطاء في Next.js؟
الإجابة:
أنشئ error.js في أي مجلد لالتقاط أخطاء هذا المجلد وأطفاله.
ما الفرق بين error.js و not-found.js؟
الإجابة:
error.js للأخطاء العامة. not-found.js للصفحات غير الموجودة.
استخدم error boundary
error.js يعمل كـ React Error Boundary تلقائياً