Nextjs
Published in

Nextjs

Nextjs

How to change port in nextjs?

Change the port in nextjs with the easy way.

You can change port in nextjs very quickly. With two methods, you can change the port in nextjs.

  1. Change port with nextjs script
  2. Change port with NPM and YARN

Change port with nextjs script

Simple, you can change the port inside your package.json file in the script section. Make sure to change the port with -p flag in nextjs scripts.

"scripts": {  "dev": "next -p 3002",  "build": "next build -p 3002",  "start": "next start -p 3002",},

You also change the port for different environments like dev, build and start in nextjs.

"scripts": {"dev": "next -p 3002","build": "next build -p 3008","start": "next start -p 3005",},

Note

I will never suggest using the script method to change port in next.js.

Change port with NPM and YARN.

The second way is the easy way to change the port in the nextjs. For that, you use npm and yarn command line cli to change the port name in nextjs. It is a straightforward process.

Benefits

  1. You can run multiple nextjs servers for different ports help of cli.
  2. The can Run the nextjs build, start and dev environments of other ports.

Lose

  1. In the second method, you do not open package.json and manually write port in

Yarn

Inside YARN, you use -p flag to add a dynamic port for your nextjs app.

yarn dev -p 3002

NPM

Inside NPM, you use -p flag to add a dynamic port for your nextjs app.

npm run dev -- -p 3002

Note For NPM

npm run dev -p 3002

If you pass -p flag without -- in your npm cli, you face an error. The error tells you you are missing the 3002 js file in your folder.

A simple word without — 3002 treated as a js file in npm

Previous articles

Conclusion

I'm recommended the second method for everyone. It is a straightforward process. If config something like database and any other services, I defiantly guide you to use the first method.

Note

In the First method, you run only one server in one environment(NPM Scripts ).

If you have any queries or need my help, don't hesitate to contact me at officialrajdeepsingh[@]gmail.com. Are you migrating React to Next.js? You can also contact me and follow the Next.js publication.

Feel free to like and share my article with others if you like my writing. You also tag on Twitter official_R_deep.

https://officialrajdeepsingh.dev/

Read More content at Nextjs. Sign up for a free newsletter and join the nextjs community on medium.

--

--

--

Nextjs Publication is an unofficial publication of Nextjs. Our goal is to bring beginners and pro developer in one place, and everybody understands the basic concept of next.js.

Recommended from Medium

Basics of Javascript · String · concat() (method)

Use NUXT with PNPM

Problem-solving with javascript

Liverpool Locks New Video https://t.co/VS2LAeVINl

Integrating your reactjs web app with stripe and cloud functions on Firebase part 1 of 2

GSoC Week 1: Setting Up the OWA

Parsing JSON with Gson library

//platform.twitter.com/widgets.js from Twitter https://twitter.com/livrpoollocks

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Rajdeep singh

Rajdeep singh

JavaScript || Python || Rust || Biotechnology || Bioinformatic || Front-end Developer || https://officialrajdeepsingh.dev/

More from Medium

Build a Solid and Secure Login Workflow in Next.js with Strapi

How to add Google AdSense in your Nextjs?

How to add Google AdSense in your Nextjs By Rajdeep Singh

Next js

How to QUICKLY Install Tailwind CSS in Next.js Project