Nextjs 실행 PORT 설정(변경)하기

Next.js의 개발 서버는 기본적으로  3000 포트에서 실행되도록 설정되어 있습니다.

개발 환경에 따라 다른 포트에서 개발 서버를 실행해야 경우가 종종 생기는데 이를 변경할 수 있는 방법을 알아봅시다.

 

1. 직접 변경하기

// package.json

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

-p 옵션을 통해 뒤에 입력된 포트로 개발 서버가 실행됩니다.

2. 환경변수 사용하기

// package.json

{
  ...
  "scripts": {
    "dev": "next dev -p ${PORT-3000}",
    "build": "next build",
    "start": "next start"
  }
  ...
}

PORT=3005 npm run dev

기본 3000포트로 실행하며 다른 포트로 실행을 원할 때에는 PORT를 지정해 실행할 수 있습니다.

3. .env 활용하기

// .env

PORT=3005

// package.json

{
  ...
  "scripts": {
    "dev": "[-e .env] && set -a && . ./.env; next dev",
    "build": "next build",
    "start": "next start"
  }
  ...
}

set -a를 사용해 환경 변수를 내보내고 Next.JS 시작 스크립트는 PORT 환경 변수에 정의된 포트에서 서버를 실행합니다.

.env 파일이 존재하지 않거나 파일에 PORT가 정의되어 있지 않으면 기본 포트로 실행됩니다.

4. .env + next-cli

// .env

PORT=3005

// dev-server.js
require('dotenv').config();
const cli = require('next/dist/cli/next-dev');

cli.nextDev(['-p', process.env.PORT || 3000]);

// package.json

{
  ...
  "scripts": {
    "dev": "node ./dev-server",
    "build": "next build",
    "start": "next start"
  }
  ...
}

3번 방법과 달리 .env에 정의된 변수를 특정해 사용하며 마찬가지로 정의된 포트에서 서버를 실행합니다.

 

위 내용은 맥 기준으로 작성되었으며 windows에서는 정상작동하지 않을 수 있습니다.