[Next.js] 로컬에서 https 사용

Next.js에서 로컬 개발 환경에서 HTTPS를 사용하는 방법에 대해 설명한다. HTTPS는 웹훅(webhooks)이나 인증(authentication) 같은 보안이 중요한 기능을 개발할 때 유용하다. Next.js는 자체 서명된 인증서를 생성하여 로컬 개발 환경에서 HTTPS를 사용할 수 있도록 지원한다.

1. HTTPS 활성화

Next.js에서 HTTPS를 사용하려면 next dev 명령어에 --experimental-https 플래그를 추가한다.

next dev --experimental-https

이 명령어를 실행하면 Next.js는 자체 서명된 인증서를 생성하고, 애플리케이션을 https://localhost:3000에서 실행한다. 기본 포트는 3000번이지만, 필요에 따라 -p, --port 또는 PORT 환경 변수를 사용해 다른 포트를 지정할 수 있다.

추가로, bun을 사용하고 있다면 아래와 같이 입력하면 된다.

bun run dev --experimental-https

2. 사용자 정의 인증서 사용

기본 제공 인증서 대신, 직접 생성한 인증서와 키를 사용하려면 --experimental-https-key와 --experimental-https-cert 플래그를 사용해 인증서와 키의 경로를 지정한다. 또한, 사용자 정의 CA 인증서를 추가하려면 --experimental-https-ca 플래그를 사용할 수 있다.

next dev --experimental-https --experimental-https-key ./certificates/localhost-key.pem --experimental-https-cert ./certificates/localhost.pem

3. 중요한 사항

• 개발 환경 전용: --experimental-https 플래그는 개발 환경에서만 사용하도록 설계되어 있으며, mkcert 도구를 통해 로컬에서 신뢰할 수 있는 인증서를 생성한다.
• 프로덕션 환경: 운영 환경에서는 신뢰할 수 있는 기관에서 발급된 인증서를 사용해야 한다.

4. Vercel에 배포 시 HTTPS

Next.js 애플리케이션을 Vercel에 배포할 때는, Vercel이 자동으로 HTTPS 설정을 처리하므로 별도의 HTTPS 설정이 필요하지 않다.

이 방법을 통해 로컬 개발 환경에서도 HTTPS를 손쉽게 적용할 수 있으며, 인증서 관리가 간편하다.