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:

2 Comments

  1. Renata Hurtado says:

    Hi! Thank you so much for your tutorial. I just have a question, is it normal that if I already did this and after doing the npm run start, it runs the localhost but the part of https it’s with a line through? For example: https://localhost:3000/, the https is crossed out.

    Like

    1. noobgramm3r says:

      Yes it’s normal, the line through https is because the certificate is not registered in local pc, you can register it using this tutorial from Microsoft https://docs.microsoft.com/en-us/skype-sdk/sdn/articles/installing-the-trusted-root-certificate

      Like

Leave a Comment

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s