_app.js

Podemos ter o _app.js para customizar a nossa inicialização das páginas fazendo bastante coisa legal:

• Layout persistente entre as mudanças de página
• Manter o estado ao navegar nas páginas
• Tratamento de erros personalizado usando componentDidCatch
• Injetar dados adicionais nas páginas
• Adicionar CSS global

Para que a gente possa substituir o App padrão nos só precisamos criar pages/_app.js .

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

export default MyApp

O Componentprop é o ativo page, então sempre que você navegar entre as rotas o Componentmudará para o novo page que você solicitou.

Portanto, todas as propriedades que você enviar no Componentserão recebidos pelo page.

pagePropsé um objeto com as propriedades iniciais que foram pré-carregadas para sua página por um dos métodos de busca de dados , caso contrário, é um objeto vazio.

Ressalvas

• Se seu aplicativo estiver em execução e você acabou de adicionar um personalizado App, será necessário reiniciar o servidor de desenvolvimento. Requerido apenas se pages/_app.jsnão existisse antes.
• Adicionar um custom getInitialProps em seu App irá desabilitar a Otimização Estática Automática em páginas sem Geração Estática .
• App atualmente não suporta métodos de busca de dados Next.js como getStaticPropsou getServerSideProps.