Podemos ter o _app.js para customizar a nossa inicialização das páginas fazendo bastante coisa legal:
<ul>
<li>Layout persistente entre as mudanças de página</li>
<li>Manter o estado ao navegar nas páginas</li>
<li>Tratamento de erros personalizado usando <code>componentDidCatch</code></li>
<li>Injetar dados adicionais nas páginas</li>
<li><a target="_blank" href="https://nextjs.org/docs/basic-features/built-in-css-support#adding-a-global-stylesheet">Adicionar CSS global</a></li>
</ul>
Para que a gente possa substituir o <code>App</code> padrão nos só precisamos criar <code>pages/_app.js</code> .
<pre><code class="lang-jsx">function MyApp({ Component, pageProps }) {
 return &lt;Component {...pageProps} /&gt;}

export default MyApp
</code></pre>
O <code>Component</code>prop é o ativo <code>page</code>, então sempre que você navegar entre as rotas o <code>Component</code>mudará para o novo <code>page</code> que você solicitou. 
Portanto, todas as propriedades que você enviar no <code>Component</code>serão recebidos pelo <code>page</code>.
<code>pageProps</code>é um objeto com as propriedades iniciais que foram pré-carregadas para sua página por um dos <a target="_blank" href="https://nextjs.org/docs/basic-features/data-fetching">métodos de busca de dados</a> , caso contrário, é um objeto vazio.
<h3 id="ressalvas">Ressalvas</h3>
<ul>
<li>Se seu aplicativo estiver em execução e você acabou de adicionar um personalizado <code>App</code>, será necessário reiniciar o servidor de desenvolvimento. Requerido apenas se <code>pages/_app.js</code>não existisse antes.</li>
<li>Adicionar um custom <code>getInitialProps</code> em seu <code>App</code> irá desabilitar a Otimização Estática Automática em páginas sem Geração Estática .</li>
<li><code>App</code> atualmente não suporta métodos de busca de dados Next.js como getStaticPropsou getServerSideProps.</li>
</ul>

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](https://nextjs.org/docs/basic-features/built-in-css-support#adding-a-global-stylesheet)

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

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

export default MyApp
```

O `Component`prop é o ativo `page`, então sempre que você navegar entre as rotas o `Component`mudará para o novo `page` que você solicitou. 

Portanto, todas as propriedades que você enviar no `Component`serã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](https://nextjs.org/docs/basic-features/data-fetching) , 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.js`nã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.

_app.js

Formado em Análise de Sistemas, pós-graduando em IA, especializado em desenvolvimento NodeJs e IoT, crio conteudos para o Youtube.
