Custom App

Core Idea

pages/_app.js controla a inicialização de páginas no Pages Router: layout persistente entre rotas, injeção de dados globais e CSS global.

Key Concepts

• pages/_app: arquivo especial que exporta um componente App recebendo Component (a página ativa) e pageProps (props pré-carregadas por data fetching methods).
• Component: muda a cada navegação de rota; qualquer prop passada a ele chega na página.
• pageProps: objeto vindo de getStaticProps/getServerSideProps/getInitialProps da página, ou {} se nenhum for usado.
• App.getInitialProps: permite injetar dados extras no App, mas desabilita Automatic Static Optimization em páginas sem getStaticProps e não é recomendado (preferir App Router).

Code Examples

import type { AppProps } from 'next/app'

export default function MyApp({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />
}

• O que demonstra: override mínimo do App padrão.

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' }
}

• O que demonstra: uso (desencorajado) de getInitialProps no App para injetar dados globais.

Anti-patterns

• getInitialProps no _app: desabilita Automatic Static Optimization para páginas sem getStaticProps; a documentação recomenda migrar para App Router em vez de usar esse padrão.
• App não suporta getStaticProps/getServerSideProps: data fetching methods não funcionam no _app.

Key Takeaways

1. _app.js é o ponto certo para CSS global e layout compartilhado entre páginas.
2. Adicionar pages/_app.js pela primeira vez exige reiniciar o dev server.
3. Evitar getInitialProps no App; preferir fetch por página ou migrar para App Router.

Connects To

• custom-document: _document cuida do HTML/body; _app cuida da inicialização de páginas.
• automatic-static-optimization: explica o efeito colateral de getInitialProps no App.