title: HTTPS on localhost using NextJS + Express
body: <p><strong>System Information</strong></p>
  
  <ul>
  <li><a href="https://github.com/expressjs/express" rel="noreferrer">Express</a>: 4.16.4</li>
  <li><a href="https://github.com/zeit/next.js/" rel="noreferrer">NextJS</a>: 8.0.3</li>
  <li><a href="https://github.com/facebook/react" rel="noreferrer">React</a>: 16.8.4</li>
  <li><a href="https://github.com/facebook/react/tree/master/packages/react-dom" rel="noreferrer">ReactDOM</a>: 16.8.4</li>
  </ul>
  
  <p><strong>Goal</strong></p>
  
  <p>Serve the web application using SSL over HTTPS on localhost</p>
  
  <p><strong>What has been done</strong></p>
  
  <ol>
  <li>Created basic NextJS application using <a href="https://github.com/segmentio/create-next-app" rel="noreferrer">Create Next App</a></li>
  <li>Generated a certificate and key using OpenSSL and moved it into the project directory</li>
  <li>Added the Express dependency</li>
  <li>Configured the app to use express inside <code>server.js</code></li>
  <li>Changed script to use the <code>server.js</code> inside <code>package.json</code> scripts.</li>
  </ol>
  
  <p><strong>server.js</strong></p>
  
  <pre><code>const express = require('express');
  const next = require('next');
  const dev = process.env.NODE_ENV !== 'production';
  const app = next({ dev });
  const handle = app.getRequestHandler();
  const port = 3000;
  
  const https = require('https');
  const fs = require('fs');
  const httpsOptions = {
    key: fs.readFileSync('./certificates/key.pem'),
    cert: fs.readFileSync('./certificates/cert.pem')
  };
  
  app
    .prepare()
    .then(() =&gt; {
      const server = express();
  
      server.get('*', (req, res) =&gt; {
        return handle(req, res);
      });
  
      server.listen(port, err =&gt; {
        if (err) throw err;
        console.log('&gt; Ready on http://localhost: ' + port);
      });
    })
    .catch(ex =&gt; {
      console.error(ex.stack);
      process.exit(1);
    });
  </code></pre>
  
  <p><strong>Extra Information</strong></p>
  
  <p>The app currently works when initialized using <code>yarn dev</code>. I have tried to serve the app over https using <a href="https://stackoverflow.com/a/42298344/3256783">this answer</a> but I was unable to figure out how to apply this to my current setup using NextJS.</p>
  
  <p>I spent a lot of time researching the web how to apply this solution but have not yet found a way on how to make this work.</p>
  
  <p>Any help is greatly appreciated.</p>