Root <App> Component

Blitz uses the App component in app/pages/_app.ts to initialize pages. You can modify it to do amazing things like:

• Persisting layout between page changes
• Keeping state when navigating pages
• Custom error handling using componentDidCatch
• Inject additional data into pages
• Add global CSS

The default _app.tsx file looks like this:

// app/pages/_app.tsx
export default function App({ Component, pageProps }) {
  const getLayout = Component.getLayout || ((page) => page)

  return getLayout(<Component {...pageProps} />)
}

The Component prop is the active page, so whenever you navigate between routes, Component will change to the new page. Therefore, any props you send to Component will be received by the page.

pageProps is an object with the initial props that were preloaded for your page by one of our data fetching methods like getStaticProps or getServerSideProps, otherwise it's an empty object.

Caveats

• Adding a custom getInitialProps in your App will disable Automatic Static Optimization in pages without Static Generation.
• When you add getInitialProps in your custom app, you must import App from "blitz", call App.getInitialProps(appContext) inside getInitialProps and merge the returned object into the return value.
• App currently does not support page data fetching methods like getStaticProps or getServerSideProps.