Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

_app.js sem funcionar

Olá pessoal. Eu estou criando o arquivo 'app.js' dentro da pasta pages, como o Mário pediu, mas não importa a alteração que eu faça dentro do arquivo, não é mostrado globalmente como ele fez. Estou em dúvida se estou errando algo ou se foi alguma atualização do next em que o app.js não é mais utilizado.

Meu arquivo está assim:

function MyApp({ Component, pageProps }) {
  return (
    <>
      <h1>Quero que em todas as páginas tenha esse titulo</h1>
      <Component {...pageProps} />
    </>
  );
}

export default MyApp;
3 respostas
solução!

Olá Adailton! Tudo bem contigo?

Você poderia informar o caminho que está página está?

Pois se o arquivo __app.js não estiver dentro da pasta pages, ele não será tratado como um arquivo especial do Next.js e não funcionará corretamente.

Portanto, para que o arquivo __app.js funcione corretamente como o arquivo de configuração do layout comum, ele deve estar localizado dentro da pasta pages, ao mesmo nível que outras páginas como index.js, about.js, entre outras.

A estrutura de pastas ficaria assim:

- pages
  - __app.js
  - index.js
  - about.js
  - ...

Se você criou o arquivo __app.js fora da pasta pages, o Next.js não o reconhecerá como o arquivo de configuração do layout e não aplicará o layout comum a todas as páginas.

Portanto, verifique a localização do arquivo __app.js e certifique-se de que ele esteja dentro da pasta pages para que funcione corretamente.

E além de possíveis erros no código, ou posição, do arquivo existem outras razões pelas quais o arquivo __app.js pode não estar funcionando corretamente:

  1. Localização incorreta: Como mencionado anteriormente, o __app.js deve estar localizado dentro da pasta pages para ser considerado um arquivo especial do Next.js. Se ele estiver em qualquer outro diretório, não será reconhecido e não funcionará corretamente.

  2. Nome do arquivo: O arquivo deve ser nomeado exatamente como __app.js (com dois underscores) para ser tratado como o arquivo de configuração do layout. Verifique se o nome do arquivo está correto e não contém erros de digitação.

  3. Importância da importação e exportação padrão: O Next.js espera que o componente MyApp seja exportado como padrão (export default). Verifique se a exportação está correta. Ou então como passado na documentação do __app.js se você não importar o AppProps de next/app pode ser que ele não funcione bem. Pois agora o código base é este, veja se o seu código precisa de alguma adaptação:

        import type { AppProps } from 'next/app'
    
        export default function MyApp({ Component, pageProps }: AppProps) {
          return <Component {...pageProps} />
        }
    
  4. Versão do Next.js: Em algumas versões mais antigas do Next.js, a estrutura ou configuração de arquivos pode ter sido diferente. Se você estiver usando uma versão antiga do Next.js, verifique a documentação específica para essa versão.

  5. Problemas de build: Se houver problemas durante o processo de build da aplicação, o arquivo __app.js pode não ser reconhecido corretamente. Certifique-se de que não haja erros ou avisos durante o processo de compilação.

  6. Cache do servidor de desenvolvimento: Em alguns casos, o servidor de desenvolvimento do Next.js pode estar em cache. Se você fez alterações no arquivo __app.js recentemente, tente limpar o cache ou reiniciar o servidor de desenvolvimento.

Se você descartou todos esses cenários e o __app.js ainda não está funcionando, pode ser útil revisar o código para verificar se há algum problema ou enviar mais detalhes sobre o código e o erro específico para que eu possa ajudá-lo a diagnosticar o problema com mais precisão.

Em suma era isso, caso precise eu estarei por aqui!

Abraços e bons estudos.

Oi Renan! Obrigado pelas observações, a estruturação de pastas estava correta, acho que o problema era realmente a versão do Next, recebi a informações de outros devs que estavam com o mesmo erro após a nova atualização. Mas tô conseguindo pegar a nova estruturação de pastas agora. Obrigadão!

Oi Adailton, eaí?

Fico feliz que pude ajudar!

Caso precise me chame que eu estarei por aqui!

Abraços e bons estudos.

E boa sorte em sua jornada de aprendizado.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software