تطبيق مخصص

يستخدم 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 تمثل الصفحة النشطة، لذلك عند التنقل بين المسارات، سيتغير Component ليعكس الصفحة الجديدة. وبالتالي، أي خصائص ترسلها إلى Component سيتم استلامها من قبل الصفحة.

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' }
}