Serving Next.js app over HTTPS locally using ngrok

Next.js apps developed locally use HTTP (e.g. http://localhost:3000) instead of HTTPS. Sometimes, however, you need to make your requests over HTTPS, and Next.js does not provide a means to force SSL on your local development server.

In my case, I needed to test the Gelocation API on Safari, which only allows HTTPS requests to this API.

This seems to be a painpoint for others too, and a bunch of workarounds were proposed in this GitHub issue. The one that I found the most frictionless and adopted was using ngrok. This is a quick solution that requires no modification to your existing server.

Here's how to set it up:

• install ngrok (locally or globally)
• run ngrok http 3000 (or whatever port you're using for your Next.js app)

This will automatically launch an ngrok session in your terminal with a link to the proxy server. Click and you're good to go!