NextJs에서 포트를 변경하기

Next.Js의 기본 포트는 3000으로 되어 있다.
개발용으로 쓸 때는 상관 없지만, 실무 레벨에서 쓸 때는 포트를 변경해야 한다.

이유야 뭐 알려진 포트를 사용하는 것은 좋지 않기 때문이다.
또는 3000번이 이미 다른 서비스를 사용하는데 쓰고 있을 수 있기 때문이다.

바꾸는 방법은 매우 간단하고, 두 가지 방법이 있다.

1. package.json에서 바꿔주기

package.json 파일을 열어준다.
거기서 scripts 항목을 간다.

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

위 처럼 -p 인자를 통해 변경할 수 있다.

2. npm, yarn 등 커맨드에서 변경하기

# Yarn - 터미널 사용 시
yarn dev -p 3002

# NPM - 터미널 사용 시
npm run dev -- -p 3002

# NPM - 파일에서 사용 시
npm run dev -p 3002

여기서 주의해야 할 부분은 터미널에서 사용할 때 npm을 사용하는 부분인데 - - 표시를 빼고 사용할 경우 에러가 발생한다.

왜냐하면 -p만 사용할 때는 port를 의미하는 것이 아닌 prefix로 받아들이기 때문이다.

그래서 npm을 터미널에서 사용할 때는 저 하이픈 2개를 붙여주는 것을 잊지 말자.