NextJS has implemented expermintal support for development https. Use that over this package: vercel/next.js#10935. Last supported NextJS version for this package is 13.3.0
.
This is a minimally modified next development server with support for self signed https certificates and console QR codes. It aims to ease the hassle of using your mobile device as your primary development target. Use local https to access all the APIs that are restricted to secure contexts.
I pretty much had a version of this script in all my work projects so i decided to make a package.
Install next-dev-https
from npm with any package manager into your existing next project. Run next-dev-https
instead of next dev
to use this server. It works identically to the regular next dev with two extra optional parameters:
--qr/-q
Print a phone scannable QR code of your dev server's local network url on startup andq
orQ
press.--https/-s
Generate and use a self signed https certificate for the dev server.
{
//...
"scripts": {
"dev": "next-dev-https --https --qr --port 4430"
//...
}
//...
}
Tip: Don't use a port where you regulary host http stuff, your browser will remember the protocols for urls and get confused when you switch back and forth.
This package uses selfsigned to generate certs and does not make your browser trust them. Even if root certs are added to your local computer, your phone and other devices will still not trust them, making the advantage very minor compared to the bad security practice of messing around with root CAs on your computer. At the time of writing (2022) most browser seems to have adequate ways of clicking through https security warnings.
Turbopack is not supported, it uses a custom rust server and looks to require changed binaries to use https. :(