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

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.

Комментарии