Custom App

Next.js, sayfaları başlatmak için App bileşenini kullanır. Bunu geçersiz kılabilir ve sayfanın başlatılmasını kontrol edebilirsiniz:

• Sayfa değişiklikleri arasında paylaşılan bir düzen oluşturma
• Sayfalara ek veri enjekte etme
• Global CSS ekleyin

Usage

Varsayılan App adresini geçersiz kılmak için, aşağıda gösterildiği gibi pages/_app dosyasını oluşturun:

import type { AppProps } from 'next/app'
 
export default function MyApp({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />
}

Component prop'u aktif page'dur, bu nedenle rotalar arasında gezindiğinizde Component yeni page olarak değişecektir. Bu nedenle, Component adresine gönderdiğiniz tüm proplar page tarafından alınacaktır.

pageProps veri getirme yöntemlerimizden biri tarafından sayfanız için önceden yüklenen ilk prop'ları içeren bir nesnedir, aksi takdirde boş bir nesnedir.

Bildiğim iyi oldu

• Uygulamanız çalışıyorsa ve özel bir App eklediyseniz, geliştirme sunucusunu yeniden başlatmanız gerekir. Yalnızca pages/_app.js daha önce mevcut değilse gereklidir.
• App gibi Next.js Veri Getirme yöntemlerini desteklemez. getStaticProps veya getServerSideProps.

getInitialProps with App

Kullanma getInitialPropsApp adresinde Otomatik Statik Optimizasyon özelliği olmayan sayfalar için devre dışı bırakılır. getStaticProps.

Bu kalıbı kullanmanızı önermiyoruz. Bunun yerine, sayfalar ve düzenler için daha kolay veri almanızı sağlayan App Router'ı aşamalı olarak benimsemeyi düşünün.

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