배경
CORS 관련 이슈나, 성능, 보안 등의 이유로 로컬 개발 서버에서도 HTTPS가 필요할 수 있습니다. 다음과 같이 Next.js에서 HTTPS로 로컬 개발 서버를 열 수 있습니다.
준비물
Next.js 최신버전
npm i next@latest명령어를 통해 Next.js 최신 버전을 준비해주세요. 아직 프로젝트를 시작하지 않았았다면npx create-next-app@latest명령어를 통해 시작할 수 있습니다.
실행하기
npx next dev --experimental-https동작 원리
프로젝트에 certificates 폴더가 생기고 자체 서명된 SSL 인증서가 추가됩니다. 해당 인증서는 mkcert 프로그램을 이용하여 발급됩니다. 이는 보안상 타인과 공유 되면 안되므로 .gitignore 파일에 certificates 폴더를 무시하도록 합니다. 이어서 자동으로 Next.js 서버가 해당 인증서를 사용하되도록 설정되므로 추가적인 설정은 필요하지 않습니다. 주의점 : 이는 로컬 개발 서버에서만 적용되므로 프로덕션환경에서도 HTTPS 사용이 필요하다면 추가작업이 필요합니다.
기본설정 변경하기
//package.json
...
"scripts": {
--"dev": "next dev",
++"dev": "next dev --experimental-https",
"build": "next build",
"start": "next start",
"lint": "next lint"
},package.json 을 다음과 같이 수정하여 npm run dev 명령어 실행시 next dev대신 next dev --experimental-https가 기본적으로 사용되도록 설정할 수 도 있습니다.