NextJS: Unable to Verify the First Certificate

When developing locally, you may be a rebel like me and opt to use Node to run the site instead of Docker. If so, you may run into some CORS issues along with certificate issues.

The major symptoms are that images return a 500 status code and fail to load, and the website output shows the following errors in the terminal:

I tried numerous recommendations, including adding this to my .env which didn't work:

NODE_TLS_REJECT_UNAUTHORIZED=0

So, instead of attempting to disable SSL, I genuflected before the SSL gods and decided to make SSL work.

This guide by Sitecore was helpful, but I have more to add; hence the blog post.

1. Run certlm in a terminal. This will open the Certificate Manager.
2. Locate the certificate that's bound to your Sitecore instance (Personal Certificates -> NameOfYourCert).
3. Double click to open.
4. Click the Certification Path tab.
5. View the certificate chain and locate the root (top) certificate. We are doing this to verify that the root cert is the SIF cert.
6. Locate that SIF cert in Trusted Root Certification Authorities --> Certificates.
7. Right click --> All Tasks --> Export --> Do not export private key --> Save as "Base 64 encoded" --> Save to a safe location outside of your repo. The file will be saved with a .cer extension. This is good.
8. In a new command window, run setx NODE_EXTRA_CA_CERTS C:\some\path\to\my-shiny-sif-certificate.cer. This will add a PATH / environment variable to your system called NODE_EXTRA_CA_CERTS.
9. See success message. Close any program that even remotely resembles a command window or has a built in command window (yes, even VS/VSC), call your mom, drive around the block, and restart your computer.
10. Profit.

The benefit of this method over changes to code is that it's a one time change, developer agnostic, and will work for all SIF installs.

By following everything mentioned above, your site should be in pretty good shape as far as errors go.

Keep BUIDLing,

MG