Secure (HTTPS) Your Non-Prod Next.JS Headless Sites

Preface: this isn't something you'll want to want to use in production, but great for non-prod or local environments!

If you're running Sitecore on Windows servers (not Azure PaaS where you can simply get a free managed certificate), and want to re-use your infrastructure (eg. in a non-prod environment or for testing purposes) you may choose to use that same Windows machine to run your headless app. This can save on costs, energy that can be spent on development (or setting up production), and help just to keep things simple.
Obviously there are heaps of hosting providers such as Vercel where you could run it, and if that's an option that works for you I would certainly recommend it. If not, read on...

The simplest way would be to copy your code to the same server - in a new folder beside your Sitecore installation - install Node and run: npm start:production. This will start your app on port 3000 (or whatever port you have configured).

This is fine if you just want to preview your app, but if you want it to work inside of Experience Editor, and your CM instance is using https, you'll need your app to also be served securely (or else you'll see a very broken site!).

Obtaining a Domain Name

I'm not going to tell you how to go about getting a domain name. Presumably if you've got Sitecore up and running somewhere you know how to go about getting a domain name, or already have one (and/or can use a sub-domain). I'm a fan of Namecheap, but whatever is cheapest/easiest!

Obtaining a Free Certificate

Easiest way to get a free certificate (on pretty much any system) these days? LetsEncrypt!

1. Download CertBot from the letsencrypt site
2. Install it
3. Temporarily stop your IIS server (if it's running) so that Certbot can use its own server
   
4. Request a certificate by running:
   certbot certonly --standalone -d "*.your.domain.com"
   (or any of the other methods such as DNS validation)
5. Start your IIS (if you stopped it in #3 above)
   

HTTPS Using the Certificate

Since we're using Node anyway to run the headless app, we can make use of the local-ssl-proxy package to proxy your app through HTTPS with a single line!.

1. Open a command prompt and run:
   npx local-ssl-proxy --key C:\Certbot\archive\your.domain.com\privkey1.pem --cert C:\Certbot\archive\your.domain.com\cert1.pem --source 443 --target 3000
   (obviously substitute your port 443 for anything else if it's occupied!)

Simple as that! It's so easy there's no excuse not to be using HTTPS for non-prods (or even local!) :)