تطبيق مخصص
يستخدم Next.js مكون App لتهيئة الصفحات. يمكنك تجاوزه والتحكم في تهيئة الصفحة وإضافة:
- إنشاء تخطيط مشترك بين تغييرات الصفحات
- حقن بيانات إضافية في الصفحات
- إضافة CSS عام
الاستخدام
لتجاوز App الافتراضي، أنشئ ملف pages/_app كما هو موضح أدناه:
import type { AppProps } from 'next/app'
export default function MyApp({ Component, pageProps }: AppProps) {
return <Component {...pageProps} />
}export default function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />
}خاصية Component هي page النشطة، لذلك عند التنقل بين المسارات، سيتغير Component إلى page الجديدة. وبالتالي، أي خاصيات ترسلها إلى Component سيتم استلامها بواسطة page.
pageProps هو كائن يحتوي على الخصائص الأولية التي تم تحميلها مسبقًا لصفحتك بواسطة إحدى طرق جلب البيانات، وإلا فهو كائن فارغ.
معلومة مفيدة
- إذا كان تطبيقك يعمل وقمت بإضافة
Appمخصص، ستحتاج إلى إعادة تشغيل خادم التطوير. مطلوب فقط إذا لم يكنpages/_app.jsموجودًا من قبل.- لا يدعم
Appطرق جلب البيانات في Next.js مثلgetStaticPropsأوgetServerSideProps.
استخدام getInitialProps مع App
استخدام getInitialProps في App سيعطل التحسين الثابت التلقائي للصفحات التي لا تحتوي على getStaticProps.
لا نوصي باستخدام هذا النمط. بدلاً من ذلك، ضع في اعتبارك التبني التدريجي لموجه التطبيق، والذي يسمح لك بجلب البيانات بسهولة أكبر لـ الصفحات والتخطيطات.
import App, { AppContext, AppInitialProps, AppProps } from 'next/app'
type AppOwnProps = { example: string }
export default function MyApp({
Component,
pageProps,
example,
}: AppProps & AppOwnProps) {
return (
<>
<p>Data: {example}</p>
<Component {...pageProps} />
</>
)
}
MyApp.getInitialProps = async (
context: AppContext
): Promise<AppOwnProps & AppInitialProps> => {
const ctx = await App.getInitialProps(context)
return { ...ctx, example: 'data' }
}import App from 'next/app'
export default function MyApp({ Component, pageProps, example }) {
return (
<>
<p>Data: {example}</p>
<Component {...pageProps} />
</>
)
}
MyApp.getInitialProps = async (context) => {
const ctx = await App.getInitialProps(context)
return { ...ctx, example: 'data' }
}