How to Change Port in Next.Js

In the world of web development, flexibility and customization are key. As a developer using Next.js, one of the basic yet essential customizations you might need to make is changing the default port of your application. Whether it’s to avoid conflicts with other running services or to adhere to deployment environment constraints, knowing how to change the port in Next.js is a handy skill.

This tutorial provides a clear, step-by-step guide on how to do just that, covering both development and production environments. With these instructions, you’ll be able to set up your Next.js application on any port you require, ensuring a smoother development and deployment process.

Prerequisites

• Basic knowledge of JavaScript and Node.js.
• Next.js application set up on your local machine. If you don’t have one, you can create a new Next.js app by running npx create-next-app@latest.

Steps to Change Next.js Port

1. Locate the package.json File: This file is in the root of your Next.js project.
2. Modify the scripts Section: In the package.json file, you will find a scripts section. This section contains commands that can be executed on your application. The default start script usually looks like this:

   
   "scripts": {
     "dev": "next dev",
     "build": "next build",
     "start": "next start"
   }
   
   

3. Change the Port for Development Mode:
   • If you want to change the port in development mode (when you run `npm run dev`), you should modify the dev script.
   • For example, to change the port to 4000, update the dev script as follows:

     
     "dev": "next dev -p 4000"
     
     

   • `-p` flag is used to specify the port number.
4. Change the Port for Production Mode:
   • If you need to change the port in production mode (when you run `npm start` after building your app), modify the start script.
   • To change the port to 4000 in production mode, update the start script:

     
     "start": "next start -p 4000"
     
     

5. Save the package.json File: After making the changes, save the file.
6. Run Your Application:
   • For development mode, use the command `npm run dev`. Your application should now be running on http://localhost:4000.
   • For production mode, first build your app using `npm run build`, then start it with `npm start`. It will be available on http://localhost:4000.

Ensure that the port number you choose is not already in use by another application.

If you’re running your Next.js application in a Docker container or behind a proxy, make sure to update the port settings there as well.

Conclusion

Changing the port in Next.js is as simple as updating the scripts section in your package.json file. This allows you to run your Next.js application on a custom port both in development and production modes. Remember to check for port conflicts to avoid errors.