تطبيق مخصص
يستخدم 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
.
لا نوصي باستخدام هذا النمط. بدلاً من ذلك، ضع في اعتبارك التبني التدريجي لموجه التطبيق (App Router)، والذي يسمح لك بجلب البيانات للصفحات والتخطيطات بسهولة أكبر.
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' }
}