Next.jsでHTTPSを有効にするのは、実は簡単です。現在はエクスペリメンタル機能ですが、フラグを1つ渡すだけで設定できます。

next dev --experimental-https

これを実行すると、Next.jsはmkcertを使用して、localhost用の証明書をcertificatesフォルダに自動で作成してくれます。

ただし、業務ではlocalhost以外のドメインを使用する必要がある場合があります。その際、ドメインをhostsファイルに登録し、開発環境でもlocalhost:3000ではなく、ドメイン:3000でアクセスすることが求められることが多いです。

そのやり方を今日は詳しく紹介したいと思います。

証明書を手動で作成する

Next.jsに任せると、localhost用の証明書しか作成されないため、ドメイン用の証明書は手動で作成する必要があります。

mkcertをインストールする

まず、mkcertをインストールしましょう。これを使うことで、簡単にローカル環境用の証明書を作成できます。

brew install mkcert
# rootCAを作成します。管理者パスワードが求められるので入力してください
mkcert -install

ドメイン用の証明書を作成する

次に、開発環境で使用するドメイン用の証明書を作成します。今回は10年有効な証明書を作ってみましょう。

export MKCERT_VALIDITY=3650 && mkcert -key-file certificates/key.pem -cert-file certificates/cert.pem your-project.com localhost 127.0.0.1 ::1

以下のようなメッセージが表示されたら、証明書の生成が成功しています。

Created a new certificate valid for the following names 📜
 - "your-project.com"
 - "localhost"
 - "127.0.0.1"
 - "::1"

The certificate is at "certificates/cert.pem" and the key at "certificates/key.pem" ✅

It will expire on 3 December 2026 🗓

package.jsonに設定を追加する

作成した証明書を利用するために、package.jsonに以下の設定を追加します。

"scripts": {
  "dev:https": "next dev --experimental-https --experimental-https-key ./certificates/key.pem --experimental-https-cert ./certificates/cert.pem"
}

完了

これで設定は完了です。pnpm dev:httpsを実行すれば、https://localhost:3000やhttps://your-project.com:3000 にワーニングなしでアクセスできるようになります。安全で快適な開発環境を手に入れましょう！