[Next.js] 코드 수정사항 반영이 되지 않을 때 (feat.HMR)

Next.js로 개발을 하던 중, 어느 날 코드를 수정한 후 저장해도 웹에 반영이 바로바로 되지 않는다는 것을 알게 됐습니다.

 

리액트나 Next.js는 Webpack에서 제공하는 기능인 HMR(Hot Module Replacement) 을 사용하는데요, 이 기능을 통해 개발자가 직접 새로고침을 하지 않아도 웹에 수정사항이 바로 반영됩니다.

 

어쨌든, 찾아보니 컴포넌트 파일 이름을 수정한 게 문제였습니다.

menu.jsx 라는 파일을 Menu.jsx로 바꿨는데요, 이 때문에 HMR 기능이 파일 인식을 하지 못하게 된 것으로 보입니다.

 

적절한 이름을 가진 파일을 하나 새로 만들면 해결됩니다.

 

 

Hot module reload is not working on my nextjs app