NextJS + HTTPS | For a Local Dev Server

Secure your local dev server to give you access to restricted features, such as device APIs.

To utilise some features of modern browsers, you need to be operating over a secure https connection. By default, the NextJS development server runs on http.

Here’s how:

• Generate a certificate for localhost
• Add the certificate to keychain
• Update server.js to use the certificate and require https
• Update package.json scripts

Generate a Certificate for localhost

You can create a certificate using OpenSSL with this command:

openssl req -x509 -out localhost.crt -keyout localhost.key \
  -days 365 \
  -newkey rsa:2048 -nodes -sha256 \
  -subj '/CN=localhost' -extensions EXT -config <( \
   printf "[dn]\nCN=localhost\n[req]\ndistinguished_name = dn\n[EXT]\nsubjectAltName=DNS:localhost\nkeyUsage=digitalSignature\nextendedKeyUsage=serverAuth")

This command will generate the certificate and the key:

• req the command for creating certificates
• -x509 is used to indicate we want a self-signed certificate