Next.js Localhost https Setup

This will be a short one but it is really useful for anyone that needs https setup on localhost or better yet with a custom domain.

Installation ​

We need local-ssl-proxy which is a simple SSL HTTP proxy using a self-signed certificate.

bash
npm install -g local-ssl-proxy

Install certificate generation utilities locally:

bash
brew install mkcert nss
mkcert --install

Setup ​

Normally if we want to make localhost run on https, we simply run the following command in the project root directory:

bash
mkcert localhost

However if you'd like to run on a custom domain of your choice because your API server has special requirements that demand running on specific domain:

bash
mkcert your.domain.com

This should generate your.domain.com.pem and your.domain.com-key.pem in the same directory.

In your package.json,

js
"scripts": {
  "dev": "next dev -p 3400 & local-ssl-proxy --key your.domain.com-key.pem --cert your.domain.com.pem --source 443 --target 3400"
}

This will start the Next.js server and the proxy concurrently or you can simply use concurrently.

Edit your /etc/hosts file by adding this line so your computer knows your.domain.com points to localhost.

127.0.0.1       your.domain.com

Now running npm run dev and navigating to https://your.domain.com/ should see your app running.

If you find this useful please share it on Twitter and let me know on twitter.