Enable https in local NextJS application

When working on development environment, it’s good practice to keep the setting as close as possible to the production environment, this is one of the reason why we want to use https enabled project during the development.
For NextJs project, we need the following to enable the https:
1- Self-Signed Certificate (.cert & .key) files.
2- Create server.js file in the root of the application to set up Node.js server.
3- Change package.json configuration to use node.js server.

Self-Signed Certificate
Since we are using this certificate for the local development we can use online tool to generate this certificate, for example this online tool https://www.selfsignedcertificate.com , just make sure to put “localhost” as the server name, then we will get two files one with cert extension and other with key extension.
In NextJs project, create folder and put these generated files into that folder let says the folder name is “cert”.

Server.Js
Create new file in the root of the project, name it “server.js”, put the following configuration:

const { createServer } = require('https')
const fs = require('fs');
const { parse } = require('url')
const next = require('next')
 
const dev = process.env.NODE_ENV !== 'production'
const port = process.env.PORT || 3000
const app = next({ dev })
const handle = app.getRequestHandler()
 
const httpsOptions = {
    key: fs.readFileSync('./cert/localhost.key'),
    cert: fs.readFileSync('./cert/localhost.cert')
  };
 
 
app.prepare().then(() => {
  createServer(httpsOptions,(req, res) => {
       
    const parsedUrl = parse(req.url, true)
    const { pathname, query } = parsedUrl
 
    if (pathname === '/a') {
      app.render(req, res, '/a', query)
    } else if (pathname === '/b') {
      app.render(req, res, '/b', query)
    } else {
      handle(req, res, parsedUrl)
    }
  }).listen(port, (err) => {
    if (err) throw err
    console.log(`> Ready on https://localhost:${port}`)
  })
})

package.json

Change the package.json, replace this line in th script section :

"start": "next start"

with this line :

 "start": "node server.js"

To test the server, run the application with following command:

npm run start

Project files should will be like this: