Перейти к содержанию

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

Next.js использует компонент App для инициализации страниц. Кастомизация этого компонента позволяет делать следующее:

  • распределять макет (layout) между страницами
  • сохранять состояние при переключении между страницами
  • обрабатывать ошибки с помощью componentDidCatch
  • внедрять в страницы дополнительные данные
  • добавлять глобальные стили

Для перезаписи дефолтного App необходимо создать файл pages/_app.js следующего содержания:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
// pages/_app.js
import App from 'next/app';

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

MyApp.getInitialProps = async (appContext) => {
  const appProps = await App.getInitialProps(appContext);

  return { ...appProps };
};

export default MyApp;

Проп Component — это активная страница. pageProps — это объект с начальными пропами, которые предварительно загружаются для страницы с помощью одного из методов для получения данных, в противном случае, данный объект будет пустым.

Заметки:

  • при добавлении кастомного App (создании файла pages/_app.js) при запущенном приложении может потребоваться перезапуск сервера для разработки
  • добавление кастомного getInitialProps в App отключает автоматическую статическую оптимизацию страниц без статической генерации
  • при добавлении getInitialProps в кастомное приложение следует import App from 'next/app', вызвать App.getInitialProps(appContext) внутри getInitialProps и объединить объект ответа с возвращаемым значением
  • в настоящее время App не поддерживает такие методы для получения данных, как getStaticProps или getServerSideProps.

Комментарии