الفرق بين المراجعتين ل"Next.js/custom app"
< Next.js
اذهب إلى التنقل
اذهب إلى البحث
| سطر 1: | سطر 1: | ||
<noinclude>{{DISPLAYTITLE:التطبيقات المخصصة باستخدام المكوّن <code>App</code>}}</noinclude> | <noinclude>{{DISPLAYTITLE:التطبيقات المخصصة باستخدام المكوّن <code>App</code>}}</noinclude> | ||
| − | تستخدم المكوّن لتهيئة الصفحات، وتتيح لك تجاوز هذا المكوّن والتحكم بتهيئة الصفحات كما تريد، مما يجعلك قادرًا على تنفيذ أشياء مفيدة حقًا: | + | تستخدم Next.js المكوّن <code>App</code> لتهيئة الصفحات، وتتيح لك تجاوز هذا المكوّن والتحكم بتهيئة الصفحات كما تريد، مما يجعلك قادرًا على تنفيذ أشياء مفيدة حقًا: |
* المحافظة على التخطيط عند التنقل بين الصفحات. | * المحافظة على التخطيط عند التنقل بين الصفحات. | ||
* المحافظة على حالة التطبيق عند التنقل بين الصفحات. | * المحافظة على حالة التطبيق عند التنقل بين الصفحات. | ||
* التعامل المخصص مع الأخطاء باستخدام <code>componentDidCatch</code>. | * التعامل المخصص مع الأخطاء باستخدام <code>componentDidCatch</code>. | ||
| − | * الدفع ببيانات إضافية | + | * الدفع ببيانات إضافية إلى الصفحات. |
* إضافة [[Next.js/built in css support|تنسيقات CSS عامة.]] | * إضافة [[Next.js/built in css support|تنسيقات CSS عامة.]] | ||
| − | لإلغاء المكوّن الافتراضي <code>App</code>، | + | لإلغاء المكوّن الافتراضي <code>App</code>، أنشئ الملف <code>pages/_app.js/.</code> كما يلي:<syntaxhighlight lang="javascript"> |
// import App from 'next/app' | // import App from 'next/app' | ||
| سطر 16: | سطر 16: | ||
// أزل إشارة التعليق عن هذه الطريقة فقط إن احتاجت كل صفحة معلومات محجوبة | // أزل إشارة التعليق عن هذه الطريقة فقط إن احتاجت كل صفحة معلومات محجوبة | ||
// فسيعطل ذلك القدرة على التحسين التلقائي الساكن ويجعل كل صفح من صفحات | // فسيعطل ذلك القدرة على التحسين التلقائي الساكن ويجعل كل صفح من صفحات | ||
| − | // التطبيق مصيرة من جانب الخادم | + | // التطبيق مصيرة من جانب الخادم |
// MyApp.getInitialProps = async (appContext) => { | // MyApp.getInitialProps = async (appContext) => { | ||
// // calls page's `getInitialProps` and fills `appProps.pageProps` | // // calls page's `getInitialProps` and fills `appProps.pageProps` | ||
| سطر 25: | سطر 25: | ||
export default MyApp | export default MyApp | ||
| − | </syntaxhighlight>يُمثِّل الكائن <code>Component</code> الصفحة المعروضة (المفعّلة) <code>page</code>، وعندما تنتقل بين صفحات التطبيق سيتغير <code>Component</code> إلى الصفحة الجديدة، وبالتالي فإن أية خاصيات ترسلها إليه ستستقبلها الصفحة. ويضم الكائن <code>pageProps</code> الخاصيات الأساسية التي تُحمَّل مسبقًا لكل صفحة من صفحات التطبيق باستخدام إحدى [[Next.js/data fetching|طرق إحضار البيانات]] وإن لم تكن هناك بيانات، فسيكون | + | </syntaxhighlight>يُمثِّل الكائن <code>Component</code> الصفحة المعروضة (المفعّلة) <code>page</code>، وعندما تنتقل بين صفحات التطبيق سيتغير <code>Component</code> إلى الصفحة الجديدة، وبالتالي فإن أية خاصيات ترسلها إليه ستستقبلها الصفحة. ويضم الكائن <code>pageProps</code> الخاصيات الأساسية التي تُحمَّل مسبقًا لكل صفحة من صفحات التطبيق باستخدام إحدى [[Next.js/data fetching|طرق إحضار البيانات]]، وإن لم تكن هناك بيانات، فسيكون الكائن فارغًا. يتلقى الكائن وسيطًا واحدًا يُدعى <code>context.ctx</code>، وهو كائن له نفس مجموعة الخاصيات الكائن <code>context</code> في <code>getInitialProps</code>. |
| − | |||
| − | يتلقى الكائن وسيطًا واحدًا | ||
== التحفظات على استخدام المكوّن <code>App</code>== | == التحفظات على استخدام المكوّن <code>App</code>== | ||
| − | * إن أضفت المكوّن وتطبيقك يعمل، ستُضطر إلى إعادة تشغيل خادم التطوير في حال لم يكن الملف <code>pages/_app.js</code>موجودًا. | + | * إن أضفت المكوّن <code>App</code> وتطبيقك يعمل، ستُضطر إلى إعادة تشغيل خادم التطوير في حال لم يكن الملف <code>pages/_app.js</code> موجودًا. |
* يُعطِّل إضافة دالة <code>getInitialProps</code> مخصصة إلى المكوّن <code>App</code> [[Next.js/automatic static optimization|التحسين التلقائي الساكن]] في الصفحات التي لا تضم شيفرة التوليد الساكن. | * يُعطِّل إضافة دالة <code>getInitialProps</code> مخصصة إلى المكوّن <code>App</code> [[Next.js/automatic static optimization|التحسين التلقائي الساكن]] في الصفحات التي لا تضم شيفرة التوليد الساكن. | ||
| − | * عليك إضافة السطر البرمجي <code>"import App from "next/app"</code> | + | * عليك إضافة السطر البرمجي <code>"import App from "next/app"</code> واستدعاء الدالة <code>App.getInitialProps(appContext)</code> ضمن الدالة <code>getInitialProps</code> ودمج الكائن المُعاد ضمن القيمة المعادة إن قررت إضافة <code>getInitialProps</code> إلى المكوّن <code>App</code>. |
| − | * لا يدعم المكوّن <code>App</code> حاليًا طرق إحضار البيانات في مثل <code>getStaticProps</code> أو <code>getServerSideProps</code>. | + | * لا يدعم المكوّن <code>App</code> حاليًا طرق إحضار البيانات في Next.js مثل <code>getStaticProps</code> أو <code>getServerSideProps</code>. |
== دعم TypeScript == | == دعم TypeScript == | ||
مراجعة 06:50، 4 يونيو 2022
تستخدم Next.js المكوّن 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.ctx، وهو كائن له نفس مجموعة الخاصيات الكائن context في getInitialProps.
التحفظات على استخدام المكوّن App
- إن أضفت المكوّن
Appوتطبيقك يعمل، ستُضطر إلى إعادة تشغيل خادم التطوير في حال لم يكن الملفpages/_app.jsموجودًا. - يُعطِّل إضافة دالة
getInitialPropsمخصصة إلى المكوّنAppالتحسين التلقائي الساكن في الصفحات التي لا تضم شيفرة التوليد الساكن. - عليك إضافة السطر البرمجي
"import App from "next/app"واستدعاء الدالةApp.getInitialProps(appContext)ضمن الدالةgetInitialPropsودمج الكائن المُعاد ضمن القيمة المعادة إن قررت إضافةgetInitialPropsإلى المكوّنApp. - لا يدعم المكوّن
Appحاليًا طرق إحضار البيانات في Next.js مثلgetStaticPropsأوgetServerSideProps.
دعم TypeScript
إن كنت تستخدم TypeScript، اطلع على توثيق استخدام TypeScript في Next.js.
المصادر
- الصفحة Custom App من توثيق Next.js الرسمي.