How to run next.js on a different port

Next.js, one of the most popular React frameworks, provides a powerful, flexible, and easy-to-use platform for building web applications. By default, Next.js runs on port 3000, but there are situations when you might want to change that port. Whether you're working on multiple applications simultaneously or need to avoid conflicts with other services, running your Next.js app on a different port is simple.

Original source of this article can be found on AxxellanceBlog @ How to run next-js on a different port

In this guide, we'll walk you through the process of changing the default port in Next.js, offering solutions for both development and production environments. Let's get started!

Prerequisites

Before we proceed, ensure you have the following:

A Next.js project set up and running. If you don’t have one yet, you can create a new project by running:
```
npx create-next-app@latest
cd your-next-app
```
Node.js installed on your machine.

Method 1: Changing the Port for Development (Using the `-p` or `--port` Flag)

In the development environment, Next.js allows you to specify the port easily when running the development server. To do so, follow these steps:

Run Next.js on a different port with the -p flag:

You can use the -p or --port flag to specify the port number. For example, to run your Next.js app on port 4000, use the following command:
```
npm run dev -p 4000
```
Or, if you're using Yarn:
```
yarn dev -p 4000
```
Verify the port change:

After running the command, your Next.js app will start on port 4000 instead of the default 3000. You can verify by navigating to:
```
http://localhost:4000
```
If the app loads, you've successfully changed the port.

Method 2: Using Environment Variables to Set a Custom Port

For more control over your configuration, you can set a custom port using environment variables. This method is helpful when deploying your app to different environments or when you want the port configuration to be persistent across sessions.

Create or edit the .env.local file:

In the root of your Next.js project, create or modify the .env.local file. Add the following line to specify the port you want:
```
PORT=4000
```
Save the file.
Run the development server:

Now, when you start the Next.js server using:
```
npm run dev
```
or
```
yarn dev
```
The app will automatically run on port 4000, as specified in the .env.local file.

Method 3: Changing the Port in Production (Custom Server)

If you want to run your Next.js app on a different port in a production environment, you’ll need to configure a custom server. Here’s how to do it:

Install Express.js (optional but recommended for production environments):

If you don't have a custom server set up yet, you can use Express.js to run your app. First, install Express:
```
npm install express
```

Create a custom server:

In the root of your project, create a file named server.js. This file will include the logic to start your app on a different port.

const express = require('express');
const next = require('next');

const dev = process.env.NODE_ENV !== 'production';
const app = next({ dev });
const handle = app.getRequestHandler();

app.prepare().then(() => {
  const server = express();

  // Set custom port, default to 4000 if not specified
  const port = process.env.PORT || 4000;

  server.all('*', (req, res) => {
    return handle(req, res);
  });

  server.listen(port, (err) => {
    if (err) throw err;
    console.log(`> Ready on http://localhost:${port}`);
  });
});

Run the custom server:

Now, instead of running the usual npm run dev, you will run your custom server with:
```
node server.js
```
Your app should now be running on the custom port you specified.

Method 4: Using Docker for Custom Port Configuration

If you’re deploying your Next.js application using Docker, you can specify the port in the Docker configuration.

Create or modify your Dockerfile:

Add the following to your Dockerfile to expose the desired port:
```
EXPOSE 4000
```
Update the docker-compose.yml (if using Docker Compose):

In your docker-compose.yml file, you can map your custom port like this:
```
version: '3'
services:
  nextjs:
    build: .
    ports:
      - "4000:4000"
```
Run your Docker container:

After configuring the Docker container, you can run it with:
```
docker-compose up
```
Your Next.js app will now be accessible at port 4000.

Conclusion

Running Next.js on a different port is a simple task, whether you’re working in development or production. In development, the -p flag or environment variables can help quickly change the port, while for production environments, a custom server setup or Docker configuration provides more flexibility.

By following these methods, you can ensure that your Next.js app runs smoothly on the port of your choice, avoiding conflicts with other applications or services.