Simple Local HTTPS Setup for Next.js Using mkcert

This guide shows how to run a Next.js project locally with HTTPS using a fake local domain like:

https://myshop.localdev:3443

Step 1 — Add Local Domain to macOS Hosts File

Open Terminal:

sudo nano /etc/hosts

Add:

127.0.0.1 myshop.localdev

Save the file and flush DNS:

sudo dscacheutil -flushcache; sudo killall -HUP mDNSResponder

Step 2 — Install mkcert and Generate SSL Certificates

Install mkcert:

brew install mkcert
brew install nss
mkcert -install

Generate local SSL certificates:

mkcert myshop.localdev

This creates:

myshop.localdev.pem
myshop.localdev-key.pem

Step 3 — Run Next.js

Start your Next.js project normally:

yarn dev

or:

npm run dev

Your app should now run on:

http://localhost:3000

Step 4 — Start Local HTTPS Proxy

Run:

npx local-ssl-proxy --source 3443 --target 3000 --cert myshop.localdev.pem --key myshop.localdev-key.pem

Step 5 — Open the Website

Open:

https://myshop.localdev:3443

You now have local HTTPS enabled for your Next.js project.