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

Next.js использует компонент App для инициализации страниц. Вы можете переопределить его и управлять процессом инициализации страниц, а также:

• Создавать общий макет (layout) между страницами
• Добавлять дополнительные данные на страницы
• Добавлять глобальные 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' }
}