أخطاء مخصصة

صفحة 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 لا يدعم حاليًا طرق جلب البيانات (Data Fetching) في Next.js مثل getStaticProps أو getServerSideProps.
• _error، مثل _app، هو اسم مسار محجوز. _error يستخدم لتعريف التخطيطات والسلوكيات المخصصة لصفحات الخطأ. /_error سيعرض 404 عند الوصول إليه مباشرة عبر التوجيه أو العرض في خادم مخصص.