صفحات مخصصة لعرض الأخطاء في Next.js
نستعرض فيما يلي مجموعة من الصفحات التي يمكن تخصيصها لعرض أخطاء الاتصال بالخادم بالطريقة التي يريدها المطور.
صفحة الخطأ 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 الرسمي.