How to run localhost 3000 on https in Next JS

In the ever-evolving world of web development, having a secure local development environment is crucial. If you’re working with Next.js and need to run localhost on HTTPS with port 3000, you’re in the right place. In this comprehensive guide, we will walk you through the process step by step, ensuring you have a secure and efficient setup. So, let’s dive into how to run localhost 3000 on HTTPS in Next JS!

Table of Contents

Why Use Localhost 3000 on HTTPS?

Security: Running your Next.js app on HTTPS ensures that your data remains encrypted during development. This is crucial when dealing with sensitive information or when your application interacts with external APIs over secure connections.

Realism: By using HTTPS in your local environment, you can mimic the production environment more accurately, reducing potential issues that may arise when switching to HTTPS in the production phase.

Also Read: How to Use SVG in Next JS?

Setting Up Your Local Development Environment

Create a New Next.js App: Create a new Next.js project by running the following command:

npx create-next-app my-next-app

Upgrade Next JS Project: If you already have a Next JS Project upgrade the Next JS package to the latest version. To upgrade a Next JS project to the latest version run the following command

npm i next@latest

Info: Make sure your Next Package version is 13.5.0 or above. To run localhost 3000 on https you need Next JS version 13.5.0 or above

Also Read: How to Generate Sitemap in Next JS?

Setting up Localhost 3000 on HTTPS

You need SSL certificates for HTTPS. For this, we will set up a new dev command in our project. Add a new command in the package.json

"dev-https": "next dev --experimental-https",

Tip: --experimental-https is the tag to enable https

Now run the command npm run dev-https. It will ask for some permissions so allow the permissions. Now navigate to https://localhost:3000. And you will see the localhost running on https.

Conclusion

In this guide, we’ve shown you how to run localhost 3000 on HTTPS in Next JS. By following these steps, you’ll have a secure development environment for your Next JS projects. Remember, a secure environment not only protects your data but also ensures smoother development and testing processes.

Give it a try, and you’ll quickly see the benefits of running localhost on HTTPS. Happy coding!