{"id":588,"date":"2022-08-25T12:06:30","date_gmt":"2022-08-25T12:06:30","guid":{"rendered":"https:\/\/frontendguruji.com\/blog\/?p=588"},"modified":"2022-08-25T12:06:31","modified_gmt":"2022-08-25T12:06:31","slug":"run-next-js-app-locally-in-https","status":"publish","type":"post","link":"https:\/\/frontendguruji.com\/blog\/run-next-js-app-locally-in-https\/","title":{"rendered":"Best way to run Next JS App locally in HTTPS instead of HTTP"},"content":{"rendered":"\n<p>Hi, While working on Next JS app, I got stuck in one situation where I had to make a HTTPS request to an API and I started to chek how to configure the Next Js app locally in HTTPS instead of HTTP.<\/p>\n\n\n\n<p>Basically I wanted to run Next JS app on <a href=\"https:\/\/localhost:3000\/\" rel=\"noopener\">https:\/\/localhost:3000<\/a>\u00a0instead of\u00a0<a href=\"http:\/\/localhost:3000\/\" rel=\"noopener\">http:\/\/localhost:3000<\/a>.<\/p>\n\n\n\n<p>After checking on many solutions like: creating a certificate locally using OpenSSL, but it was taking too much time in Windows machine, and after doing everything still app was not running in HTTPS mode. <br>Then I found a very easy to use tool named &#8220;<strong>NGROK<\/strong>&#8220;.<\/p>\n\n\n\n<h2>What is NGROK ?<\/h2>\n\n\n\n<p><strong>ngrok<\/strong> is the programmable network edge that adds connectivity, security, and observability to your apps with no code changes.<\/p>\n\n\n\n<h2>How to run Next JS App locally in HTTPS ?<\/h2>\n\n\n\n<ul><li>Install ngrok as a global npm package &#8220;<strong>npm install ngrok -g<\/strong>&#8220;<\/li><li><a href=\"https:\/\/dashboard.ngrok.com\/get-started\/setup\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Create a free account in ngrok<\/a> and get authtoken from dashboard.<\/li><li>Add authtoken to local ngrok: &#8220;<strong>ngrok config add-authtoken &lt;your auth token><\/strong>&#8220;<\/li><li>Run ngrok with the port number in use by Next JS app like: &#8220;<strong>ngrok http 3000<\/strong>&#8220;<\/li><\/ul>\n\n\n\n<p>You will get the HTTP and HTTPS link, which can be accessed from any device:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img width=\"982\" height=\"268\" src=\"https:\/\/frontendguruji.com\/blog\/wp-content\/uploads\/2022\/08\/image-1.png\" alt=\"run Next JS App locally in HTTPS,Next Js app locally in HTTPS,What is NGROK,How to run Next JS App locally in HTTPS,configure the Next Js app locally in HTTPS\" class=\"wp-image-589\" srcset=\"https:\/\/frontendguruji.com\/blog\/wp-content\/uploads\/2022\/08\/image-1.png 982w, https:\/\/frontendguruji.com\/blog\/wp-content\/uploads\/2022\/08\/image-1-300x82.png 300w, https:\/\/frontendguruji.com\/blog\/wp-content\/uploads\/2022\/08\/image-1-768x210.png 768w, https:\/\/frontendguruji.com\/blog\/wp-content\/uploads\/2022\/08\/image-1-150x41.png 150w\" sizes=\"(max-width: 982px) 100vw, 982px\" \/><\/figure>\n\n\n\n<p>Thanks!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Learn how to run Next JS App locally in HTTPS instead of HTTP<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"default","ast-global-header-display":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":""},"categories":[30],"tags":[88,31,89,87],"_links":{"self":[{"href":"https:\/\/frontendguruji.com\/blog\/wp-json\/wp\/v2\/posts\/588"}],"collection":[{"href":"https:\/\/frontendguruji.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/frontendguruji.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/frontendguruji.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/frontendguruji.com\/blog\/wp-json\/wp\/v2\/comments?post=588"}],"version-history":[{"count":3,"href":"https:\/\/frontendguruji.com\/blog\/wp-json\/wp\/v2\/posts\/588\/revisions"}],"predecessor-version":[{"id":592,"href":"https:\/\/frontendguruji.com\/blog\/wp-json\/wp\/v2\/posts\/588\/revisions\/592"}],"wp:attachment":[{"href":"https:\/\/frontendguruji.com\/blog\/wp-json\/wp\/v2\/media?parent=588"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/frontendguruji.com\/blog\/wp-json\/wp\/v2\/categories?post=588"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/frontendguruji.com\/blog\/wp-json\/wp\/v2\/tags?post=588"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}