Next.js 애플리케이션에서 기본 포트 번호를 변경하는 방법

여러분, 안녕하세요,

이 짧은 블로그 게시물에서는 Next.js 애플리케이션에서 기본 포트 번호를 재정의하는 방법에 대해 작성합니다.

내가 왜 이것을 쓰고 있습니까?

오늘 작업할 때 app A 및 app B라는 두 가지 다른 Next.js 애플리케이션을 실행해야 했습니다. Next.js 애플리케이션의 기본 포트가 3000이고 실행할 수 없었기 때문에 app B .

즉시 포트를 변경하는 방법을 온라인으로 검색했는데 간단했습니다.

뛰어들자

어떻게 변경합니까?

수동 구성을 사용하거나 Next.js를 사용하여 부트스트랩된 create-next-app 앱이 있다고 가정해 보겠습니다.

Next.js 앱의 package.json 파일로 이동하여 다음을 수행합니다.

참고: 다음은 제가 작업하고 있는 사이드 프로젝트의 package.json입니다.

{
  "name": "front-end",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev", 
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@chakra-ui/icons": "1.1.0",
    "@chakra-ui/react": "1.7.0",
    "@emotion/react": "11.5.0",
    "@emotion/styled": "11.3.0",
    "axios": "0.24.0",
    "framer-motion": "5.0.0",
    "next": "12.0.3",
    "nookies": "2.5.2",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "react-icons": "^4.3.1"
  },
  "devDependencies": {
    "@types/react": "17.0.34",
    "eslint": "8.0.1",
    "eslint-config-next": "12.0.3",
    "typescript": "4.4.4"
  }
}

에게

{
  "name": "front-end",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev -p 3001",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@chakra-ui/icons": "1.1.0",
    "@chakra-ui/react": "1.7.0",
    "@emotion/react": "11.5.0",
    "@emotion/styled": "11.3.0",
    "axios": "0.24.0",
    "framer-motion": "5.0.0",
    "next": "12.0.3",
    "nookies": "2.5.2",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "react-icons": "^4.3.1"
  },
  "devDependencies": {
    "@types/react": "17.0.34",
    "eslint": "8.0.1",
    "eslint-config-next": "12.0.3",
    "typescript": "4.4.4"
  }
}

위의 코드를 기반으로 변경해야 할 사항은 끝에 포트 번호가 있는 -p에 next dev를 추가하는 것입니다.

"dev": "next dev -p 3001"

이제 터미널로 이동하여 yarn run dev 두 번째 Next.js 애플리케이션이 포트 3001에서 실행되어야 합니다. http://localhost:3001 url로 이동하여 로컬 컴퓨터에서 앱이 실행되는지 확인하세요.

결론:

그게 다야. 시간을 내어 블로그 게시물을 읽어주셔서 감사합니다. 게시물이 유용했다면 ❤️를 추가하고 댓글 섹션에서 내가 놓친 부분이 있으면 알려주세요. 블로그 피드백은 환영합니다.

트위터로 소통해요 : ()