[Nextjs] Hot Reload 안되는 이유. 해결법

Hot Reload : 편집기에서 코드 저장하면 바로 페이지에 반영되는 기능

있을땐 몰랐지만, 없으니 너무 간절해진 핫 리로드가 작동하지 않았다.

- 사유1 : import 당시 컴포넌트 이름의 대소문자를 잘못쓴 경우
나는 코드컨벤션은 잘 지키면서 짜왔기에 이 문제는 아니였다.
- 사유2 : app/layout.js 에서 html,body를 없앤경우
사실 사유 2번에 내가 해당됐는데 아무것도 모르고 page에 html을 날려버렸더니 hot reload 가 작동하지 않았다.

화면상으로는 잘 나오는데 왜 그렇게 된것일까..

이렇게 구조를 만들어주니 잘 작동함을 볼 수 있다.

참고
https://stackoverflow.com/questions/74515807/uncaught-error-invariant-expected-app-router-to-be-mounted