Пользовательское приложение (Custom App)

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