Heroku redirect Next.js React client app http to https

I do this in one of my production applications.

We prepare the next app object and init an express server. This is done in the server.js file. You can read more about it in the docs about a custom server.

Next.js also has an example in their github in the examples folder about a custom express server. It's here.

const express = require('express');const next = require('next');const dev = process.env.NODE_ENV !== 'production';const app = next({ dev });const handle = app.getRequestHandler();app  .prepare()  .then(() => {    const server = express();    server.use((req, res, next) => {      const hostname = req.hostname === 'www.app.domain.com' ? 'app.domain.com' : req.hostname;      if (req.headers['x-forwarded-proto'] === 'http' || req.hostname === 'www.app.domain.com') {        res.redirect(301, `https://${hostname}${req.url}`);        return;      }      res.setHeader('strict-transport-security', 'max-age=31536000; includeSubDomains; preload');      next();    });    server.get('*', (req, res) => handle(req, res));    server.listen(      4242,      error => {        if (error) throw error;        console.error('Listening on port 4242');      }    );  })  .catch(error => {    console.error(error);    process.exit(1);  });

As for deploying to Heroku you should be able to just customize the npm start script to start nextjs like so:

"scripts": {  "dev": "next",  "build": "next build",  "start": "next start"}

Heroku also runs npm run build automatically so it should build the app for you.