الأخطاء المخصصة

صفحة 404

قد يتم الوصول إلى صفحة 404 بشكل متكرر. عرض صفحة الخطأ من جانب الخادم (SSR) لكل زيارة يزيد من حمل خادم Next.js. هذا يمكن أن يؤدي إلى زيادة التكاليف وتجارب بطيئة.

لتجنب هذه المشاكل، يوفر Next.js صفحة 404 ثابتة افتراضيًا دون الحاجة إلى إضافة أي ملفات إضافية.

تخصيص صفحة 404

لإنشاء صفحة 404 مخصصة يمكنك إنشاء ملف pages/404.js. يتم توليد هذا الملف بشكل ثابت (static) أثناء عملية البناء.

export default function Custom404() {
  return <h1>404 - الصفحة غير موجودة</h1>
}

معلومة مفيدة: يمكنك استخدام getStaticProps داخل هذه الصفحة إذا كنت بحاجة لجلب البيانات أثناء عملية البناء.

صفحة 500

عرض صفحة خطأ من جانب الخادم (SSR) لكل زيارة يزيد من تعقيد الاستجابة للأخطاء. لمساعدة المستخدمين في الحصول على ردود سريعة للأخطاء، يوفر Next.js صفحة 500 ثابتة افتراضيًا دون الحاجة إلى إضافة أي ملفات إضافية.

تخصيص صفحة 500

لتخصيص صفحة 500 يمكنك إنشاء ملف pages/500.js. يتم توليد هذا الملف بشكل ثابت (static) أثناء عملية البناء.

export default function Custom500() {
  return <h1>500 - حدث خطأ في جانب الخادم</h1>
}

معلومة مفيدة: يمكنك استخدام getStaticProps داخل هذه الصفحة إذا كنت بحاجة لجلب البيانات أثناء عملية البناء.

تخصيص متقدم لصفحة الأخطاء

يتم التعامل مع أخطاء 500 من جانب العميل والخادم بواسطة مكون Error. إذا كنت ترغب في تجاوزه، قم بتعريف الملف pages/_error.js وأضف الكود التالي:

function Error({ statusCode }) {
  return (
    <p>
      {statusCode
        ? `حدث خطأ ${statusCode} في الخادم`
        : 'حدث خطأ في جانب العميل'}
    </p>
  )
}

Error.getInitialProps = ({ res, err }) => {
  const statusCode = res ? res.statusCode : err ? err.statusCode : 404
  return { statusCode }
}

export default Error

ملف pages/_error.js يستخدم فقط في بيئة الإنتاج. في بيئة التطوير ستحصل على خطأ مع سلسلة الاستدعاءات لمعرفة مصدر الخطأ.

إعادة استخدام صفحة الخطأ المدمجة

إذا كنت ترغب في عرض صفحة الخطأ المدمجة، يمكنك ذلك عن طريق استيراد مكون Error:

import Error from 'next/error'

export async function getServerSideProps() {
  const res = await fetch('https://api.github.com/repos/vercel/next.js')
  const errorCode = res.ok ? false : res.status
  const json = await res.json()

  return {
    props: { errorCode, stars: json.stargazers_count },
  }
}

export default function Page({ errorCode, stars }) {
  if (errorCode) {
    return <Error statusCode={errorCode} />
  }

  return <div>نجوم Next: {stars}</div>
}

يقبل مكون Error أيضًا خاصية title إذا كنت ترغب في إضافة رسالة نصية مع statusCode.

إذا كان لديك مكون Error مخصص، تأكد من استيراده بدلاً من هذا. next/error يصدر المكون الافتراضي المستخدم من قبل Next.js.

محاذير

• لا يدعم مكون Error حاليًا طرق جلب البيانات في Next.js مثل getStaticProps أو getServerSideProps.
• _error، مثل _app، هو اسم مسار محجوز. _error يستخدم لتعريف التخطيطات والسلوكيات المخصصة لصفحات الأخطاء. /_error سيعرض 404 عند الوصول إليه مباشرة عبر التوجيه أو العرض في خادم مخصص.