Next.js/custom app

التطبيقات المخصصة باستخدام المكوّن App

تستخدم المكوّن لتهيئة الصفحات، وتتيح لك تجاوز هذا المكوّن والتحكم بتهيئة الصفحات كما تريد، مما يجعلك قادرًا على تنفيذ أشياء مفيدة حقًا:

• المحافظة على التخطيط عند التنقل بين الصفحات.
• المحافظة على حالة التطبيق عند التنقل بين الصفحات.
• التعامل المخصص مع الأخطاء باستخدام componentDidCatch.
• الدفع ببيانات إضافية غلى الصفحات.
• إضافة تنسيقات CSS عامة.

لإلغاء المكوّن الافتراضي App، أنشء الملف pages/_app.js/. كما يلي:

// import App from 'next/app'

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}
// أزل إشارة التعليق عن هذه الطريقة فقط إن احتاجت كل صفحة معلومات محجوبة
// فسيعطل ذلك القدرة على التحسين التلقائي الساكن ويجعل كل صفح من صفحات 
// التطبيق مصيرة من جانب الخادم.
// MyApp.getInitialProps = async (appContext) => {
//   // calls page's `getInitialProps` and fills `appProps.pageProps`
//   const appProps = await App.getInitialProps(appContext);
//
//   return { ...appProps }
// }

export default MyApp

يُمثِّل الكائن Component الصفحة المعروضة (المفعّلة) page، وعندما تنتقل بين صفحات التطبيق سيتغير Component إلى الصفحة الجديدة، وبالتالي فإن أية خاصيات ترسلها إليه ستستقبلها الصفحة. ويضم الكائن pageProps الخاصيات الأساسية التي تُحمَّل مسبقًا لكل صفحة من صفحات التطبيق باستخدام إحدى طرق إحضار البيانات وإن لم تكن هناك بيانات، فسيكون كائنًا فارغًا.

يتلقى الكائن وسيطًا واحدًا يُدعى، وهو كائن له نفس مجموعة الخاصيات الكائن context في getInitialProps.

التحفظات على استخدام المكوّن App

• إن أضفت المكوّن وتطبيقك يعمل، ستُضطر إلى إعادة تشغيل خادم التطوير في حال لم يكن الملف pages/_app.jsموجودًا.
• يُعطِّل إضافة دالة getInitialProps مخصصة إلى المكوّن App التحسين التلقائي الساكن في الصفحات التي لا تضم شيفرة التوليد الساكن.
• عليك إضافة السطر البرمجي "import App from "next/app" و استدعاء الدالة App.getInitialProps(appContext) ضمن الدالة getInitialProps ودمج الكائن المُعاد ضمن القيمة المعادة إن قررت إضافة إلى المكوّن App.
• لا يدعم المكوّن App حاليًا طرق إحضار البيانات في مثل getStaticProps أو getServerSideProps.

دعم TypeScript

إن كنت تستخدم TypeScript، اطلع على توثيق استخدام TypeScript في Next.js.

المصادر

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

اقرأ أيضًا

• التحسين التلقائي الساكن في Next.js.
• صفحات مخصصة لعرض الأخطاء.
• المستندات المخصصة في Next.js باستخدام المكوّن document
• استخدام خادم مخصص في Next.js.