Next.js/custom error page

نستعرض فيما يلي مجموعة من الصفحات التي يمكن تخصيصها لعرض أخطاء الاتصال بالخادم بالطريقة التي يريدها المطور.

صفحة الخطأ 404

يمكن أن يصل بك الحال إلى هذه الصفحة كثيرًا. وعندما يصيّر الخادم صفحة خطأ عند كل زيارة، سيزيد ذلك الحمل على خادم Next.js، وقد يسبب ذلك زيادة في التكلفة وتجربة بطيئة. ولتحاشي المشاكل السابقة، تزوّدك Next.js بصفحة ساكنة للخطأ 404 افتراضيًا دون إضافة أية ملفات أخرى.

صفحة مخصصة للخطأ 404

لتنشئ صفحة مخصصة للخطأ 404، أنشئ الملف pages/404.js الذي يوُلَّد بشكل ساكن أثناء بناء التطبيق.

// pages/404.js
export default function Custom404() {  
  return <h1>404 - Page Not Found</h1>
}

ملاحظة: بإمكانك استخدام الدالة getStaticProps ضمن هذه الصفحة إن احتجت إلى بيانات أثناء بناء التطبيق.

صفحة الخطأ 500

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

صفحة مخصصة للخطأ 500

لتنشئ صفحة مخصصة للخطأ 404، أنشئ الملف pages/500.js الذي يوُلَّد بشكل ساكن أثناء بناء التطبيق.

// pages/500.js
export default function Custom500() {
  return <h1>500 - Server-side error occurred</h1>
}

ملاحظة: بإمكانك استخدام الدالة getStaticProps ضمن هذه الصفحة إن احتجت إلى بيانات أثناء بناء التطبيق.

تخصيص أكثر تقدمًا لصفحة الخطأ 500

يُعالج الخطأ 500 في كلتا واجهتي التطبيق من خلال المكوّن Error. فإن أردت تغيير صفحة الخطأ، أنشئ الملف pages/_error.js وضع فيه الشيفرة التالية:

function Error({ statusCode }) {
  return (
    <p>
      {statusCode
        ? `An error ${statusCode} occurred on server`
        : 'An error occurred on client'}
    </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.statusCode
  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: {stars}</div>
}

يأخذ المكوّن Error عنوانًا title كخاصية إن أردت أن تمرر رسالة نصية إلى جانب رمز الحالة statusCode. وإن استخدمت مكوّن Error مخصص تأكد أن تُدرجه بدلًا من من المكوّن Error الافتراضي ، لأن ستصدر المكوّن الافتراضي الذي تستخدمه Next.js.

محاذير

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

المصادر

• الصفحة Custom error Page من توثيق Next.js الرسمي.