{
  "$type": "site.standard.document",
  "path": "/nextjs-heroku-https/",
  "publishedAt": "2019-08-05T09:00:00.000Z",
  "site": "at://did:plc:6gssgguzeecdttuw4gpdshg2/site.standard.publication/self",
  "tags": [
    "next.js",
    "react",
    "heroku",
    "https"
  ],
  "textContent": "[Image: secure-header.jpg]\n\nI recently ran into the case where I wanted to ensure all traffic to my NextJS site was happening over HTTPS. Since my site is deployed using next start on heroku, I ended up implementing this using a custom server that checks all requests are https before handling them.\n\nHere is the completed server.js implementation.\n\n[Code block]\n\nThe redirect only fires in production mode and it uses a environment variable that contains the servers hostname. You'll notice that it does not check the requests URL or protocol. This is because all traffic from Heroku's router to your server happens over HTTP. You can see if the request is https by checking the value of the x-forwarded-proto header that Heroku adds.\n\nYou'll also have to update your start script to run your server and not the nextjs default.\n\n[Code block]\n\nNotes and Limitations:\n\nThis does not support sites hosted using next export\n\nChanges to server.js are not hot reloaded.\n\nRead the original post with all embeds and interactive content at https://rants.broonix.ca/nextjs-heroku-https/",
  "title": "NextJS & Heroku: HTTPS by default"
}