Next.js, Nest.js 시작하기

나는 다음과 같은 구조로 프로젝트 폴더를 생성했다. 

프로젝트/
├── client/         # Next.js 프로젝트
└── server/         # Nest.js 프로젝트

 

Next.js는 실행 명령이 npm run dev이고 Nest.js는 실행 명령이 npm run start:dev 여서 한번에 실행 할 수 있도록 합치기로 했다. 

 

먼저 루트 디렉토리에 concurrently를 설치한다

npm init -y
npm install concurrently --save-dev

 

그리고 루트 디렉토리의 package.json에 다음과 같이 설정해준다. 

{
  "name": "your-project-name",
  "version": "1.0.0",
  "scripts": {
    "client": "cd client && npm run dev",
    "server": "cd server && npm run start:dev",
    "dev": "concurrently \"npm run server\" \"npm run client\""
  },
  "devDependencies": {
    "concurrently": "^8.2.0"
  }
}

 

이렇게 하면 아래 명령어로 프론트와 백을 동시에 실행할 수 있다

 

npm run dev

 

근데 나는 서버 자체는 열리는데 아래와 같은 에러가 떴다...

 

이 오류는 포트 충돌 문제를 나타난다고 한다. Next.js와 Nest.js가 모두 기본적으로 3000번 포트를 사용하려고 하기 때문에 발생하는 에러인 것이다. 나는 CORS 설정으로 프론트와 백의 서버를 분리해줬다. 

 

CORS(Cross-Origin Resource Sharing)는 웹 브라우저의 보안 정책 중 하나이며, 다른 출처(도메인, 포트, 프로토콜)의 리소스를 요청할 때 발생하는 제한을 관리하는 메커니즘이다. 

 

예를 들어:
프론트엔드: http://localhost:3000
백엔드: http://localhost:3001

이렇게 포트가 다른 경우, 프론트엔드에서 백엔드로 API 요청을 보낼 때 CORS 에러가 발생할 수 있다. 
이 때 app.enableCors()를 사용하여 이러한 CORS 제한을 해제할 수 있다. 

 

그럼 왜 프론트와 백이 같은 서버에서 돌리면 안되는가? React와 Flask로 개발할 때는 잘만 돌렸는데!!

Next.js와 React+Flask의 구조는 조금 다르다고 한다. 

 

React+Flask 구조

프로젝트/
├── static/          # React 빌드 파일들이 여기로 들어감
├── templates/       # Flask의 템플릿
└── app.py          # Flask 서버

 

- React는 빌드하면 정적 파일들(HTML, CSS, JS)이 생성됨
- Flask가 이 정적 파일들을 서빙하면서 동시에 API 서버 역할도 수행
결과적으로 하나의 서버에서 모든 것을 처리

Next.js + Nest.js 구조

프로젝트/
├── client/         # Next.js 프로젝트
└── server/         # Nest.js 프로젝트

 

- Next.js는 서버사이드 렌더링(SSR)을 지원하는 독립적인 서버
- 자체적으로 서버 기능이 있어서 라우팅, 페이지 렌더링 등을 처리
- 개발 시 실시간 코드 수정과 새로고침(Hot Reload) 기능을 위해 별도 서버가 필요

물론 프로덕션 환경에서는 밑의 방법들로 Next.js와 Nest.js를 같은 서버에서 돌릴 수 있다

1. Next.js를 빌드해서 정적 파일 생성
2. Nest.js에서 이 정적 파일들을 서빙
3. 하나의 포트에서 모든 것을 처리

하지만 개발 환경에서는 빠른 빌드, 독립적인 에러 처리 등등  여러가지 이유로 분리하는 것이 좋다고 한다.