Настраиваемое приложение

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

• Создавать общий макет между страницами
• Вводить дополнительные данные на страницы
• Добавить глобальный CSS

Использование

Чтобы переопределить стандартный App, создайте файл pages/_app, как показано ниже:

import type { AppProps } from 'next/app'
 
export default function MyApp({ Component, pageProps }: AppProps) {
  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' }
}