【Next.js 13.5】ローカル環境でHTTPSが使用できるようになった！

概要

Next.js 13.5にアップデートされて開発サーバでHTTPSを使用して立ち上げることができるようになったので、やり方を紹介します。

Next.jsのセットアップ

Next.jsのインストール

npx create-next-app@latest

環境

• Node.js v18.17.0
• Next.js v13.5.4

HTTPSで立ち上げる方法

package.jsonの開発サーバを立ち上げるスクリプト(dev)に--experimental-httpsを追記する

package json

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

立ち上げ

スクリプトを実行します。

npm run dev

> project-name0.1.0 dev
> next dev --experimental-https

 ⚠ Self-signed certificates are currently an experimental feature, use at your own risk.
   Downloading mkcert package...
   Download response was successful, writing to disk
   Attempting to generate self signed certificate. This may prompt for your password
Sudo password:

実行するとパスワードの入力を求められるので、PCのパスワードを入力します。
入力後に下記のようにhttpsで開発サーバーが立ち上がりますので、ブラウザで確認してみてください。

  ▲ Next.js 13.5.4
  - Local:        https://localhost:3000

ちなみにパスワード入力後にcertificatesディレクトリが作成され、.gitignoreにcertificatesが追記されます。

2023.10.08時点ではExperimentalなので使用時のトラブルは自己責任でお願いします。

その他のNext.js 13.5アップデート内容

https://nextjs.org/blog/next-13-5

おわりに

これで簡単にWebhookをローカル環境で受けることができるようなった！
ngrokなどをインストールせず、少しの追記するだけなのは、楽だと思いました。