تطبيق مخصص

يستخدم 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' }
}