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

Npm run dev problemas no reloader

Eu executo o comando npm run dev para publicar no servidor na porta 3000 até aí funciona direitinho, mas conforme eu vou modificando a páginas ele não acompanha, tem alguma forma de ser mais automático? Ou tenho que dar o npm run dev novamente?

3 respostas

Opa Clara, tudo bem?

Uma sugestão é usar o nodemon. O nodemon é uma ferramenta que ajuda no desenvolvimento de aplicativos baseados em Node.js, reiniciando automaticamente a aplicação Node sempre que são detectadas alterações nos arquivos do diretório.

Para utilizar o nodemon, basta usar o comando "npm install -g nodemon", que instala globalmente o pacote pelo "next dev" no seu terminal. Por exemplo:

npm install -g nodemon

E no arquivo package.json, adicionar o script para executar o servidor com o nodemon. Por exemplo:

"scripts": {
  "dev": "nodemon server.js"
}

Espero que ajude!

Tenha um bom dia e bons estudos.

solução!

Certo, aí assim, na parte de scripts eu coloquei dessa forma:

  "scripts": {
    "dev": "next dev, nodemon server.js",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "test": "echo \"Error: no test specified\" && exit 1"  
  },

Tem algum problema, pois diz que iria repetir esse "dev", então coloquei em dev separado por uma vírgula, ai irei testar se funciona

Opa Clara, tudo certo?

Peço desculpas pela confusão que a minha resposta anterior pode ter causado.

O next.js por meio do comando npm run dev por padrão já possui a função de hot-reloading integrado. Neste caso, o servidor é iniciado automaticamente pelo comando npm run dev e já possui suporte embutido para hot-reloading, portanto, o uso de dois hot-reloaders pode causar alguns conflitos na aplicação, como comportamentos imprevisíveis e problemas de sincronização. Sendo assim, o desejado é utilizar apenas uma referência para o dev:

"scripts": {
    "dev": "next dev",

Como neste curso estamos programando utilizando o Next como ferramenta principal e introduzindo essa ferramenta para o nosso ambiente, recomendo verificar se o problema de hot-reloading não está relacionado a outro fator do projeto, que pode interferir futuramente em outras funcionalidades do mesmo.

Por exemplo, certifique-se de que todas as dependências estão atualizadas para suas versões mais recentes, você pode atualizar todas por meio do comando npm install -g npm-check-updates. Verifique também se você está usando o Next.js, React e React DOM nas versões compatíveis, atualmente as mais recentes e que você pode verificar no seu arquivo package.json são:

"next": "^13.4.4",
"react": "^18.2.0",
"react-dom": "^18.2.0"

Deixo também a recomendação da documentação do Next.js sobre o seu fast refresh, que é o recurso específico do Next.js que detecta automaticamente as alterações nos arquivos do projeto e aplica essas alterações no navegador em tempo real.

Novamente, peço desculpas pelo equívoco na minha resposta anterior, sinto muito por qualquer confusão ou inconveniência que pode ter causado. Agradeço desde já pela compreensão.

Caso fique alguma dúvida, fico à disposição.

Desejo um bom dia e bons estudos.