Next.js 13.5以降のローカル開発環境でのHTTPS設定について「–experimental-https」

更新日：2025/02/14

Next.jsの開発環境でHTTPSを使用する方法について、実践的な知見を交えて解説します。Next.js 13.5から導入された新機能により、ローカル開発環境でのHTTPS設定が大幅に簡素化されました。

背景

従来、Next.jsのローカル開発環境でHTTPSを使用するには、複雑な設定が必要でした。自己署名証明書の生成やサーバー設定の変更など、開発者にとって煩雑な作業が必要でした。しかし、Next.js 13.5以降では、単一のフラグ追加だけでHTTPS環境を構築できるようになりました。

設定は非常にシンプルです。package.jsonのscriptsセクションに--experimental-httpsフラグを追加するだけです：

{
  "scripts": {
    "dev": "next dev --experimental-https",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  }
}

この設定により：

Dockerを使用している環境では、ポートやSSL証明書の設定で衝突が発生する可能性があります。この場合、以下の対処法が有効です：

自己署名証明書を使用しているため、ブラウザで警告が表示される場合があります。これは開発環境では正常な動作であり、以下の手順で対処できます：

以下のような開発シーンでは、HTTPS設定が特に重要になります：

Next.js 13.5以降のHTTPS設定は、開発効率を大きく向上させる機能です。特にセキュリティが重要なアプリケーションの開発では、早い段階からHTTPSを有効にすることで、本番環境での問題を未然に防ぐことができます。

Docker環境での使用時には注意が必要ですが、適切な対処法を知っておくことで、スムーズな開発が可能です。

なお、この機能は執筆時点（2024年2月）ではexperimental扱いとなっているため、今後のアップデートで変更される可能性があります。定期的に公式ドキュメントを確認することをお勧めします。

新規記事

すべてを見る

人気記事ランキング

ピックアップ記事

話題のキーワードから探す