최근 새 프로젝트를 진행하게 되면서 nextjs 의 app router 기능을 사용하기 위해 최신버전의 nextjs(V13.4.5)를 설치하여 사용중이였습니다.

기존 프로젝트와 같이 local 환경에서 https 적용을 위해 custom server 를 만들어서 ssl 인증서를 적용해

https로 환경을 구성했습니다.

custom server 로 최신버전의 next를 실행하니 hmr(코드 수정시 브라우저에서 바로 반영되는 기능)이 이루어

지지않아 불편함을 겪었습니다.

이를위해 “caddy” 라는 https proxy 를 도와주는 녀석을 사용했습니다.

$ brew install caddy

설치후 프로젝트의 package.json 에서 local 포트번호를 바꿔주었습니다.

"scripts": {
    "dev": "env-cmd -f .env.local next dev -p 3030",
	   ...
  },

그후 “caddy” 를 3000포트로 띄우고 모든 트래픽을 3030 포트로 포워딩 해주었습니다

$ caddy reverse-proxy --from localhost:3000 --to localhost:3030

yarn dev 로 프로젝트를 실행시키고 https://localhost:3000 번을 접속하면 잘 실행되는걸 알수 있습니다!