Nest.js & Next.js - 1. 기본 셋팅

들어가며

올해 나의 기술적인 목표 중 하나가 Front-end framework를 배우는 것이다.
마침 현재 회사가 React Native를 주력으로 사용하고 있기 때문에 나 역시 React에 능숙해질 필요가 있을 것 같아 Next.js를 배우면서 React 사용법을 익히고있다.

공부를 하면서 Next.js를 마치 Spring과 Thymeleaf 조합처럼 다른 서버사이드 프레임워크와 함께 쓸 수 있을까 해서 여러가지 알아보았다.

일단 Next.js 9부터 지원하는 API route 기능도 있고,
express를 server에 붙여 사용하는 방법이나, fastify-nextjs를 사용하는 방법도 있지만
회사에서 그리고 평소에도 Nest.js를 사용하고 있기 때문에 Nest.js와 Next.js를 같이 사용할 수 있는 방법이 없나 살펴보았고 이번에 살펴볼 nest-next 패키지를 발견하였다.

하나 맘에 걸리는 것은 Nest.js에서 정식으로 지원하는 모듈이 아니라는 점인데,
Nest.js의 아버지인 Kamil Mysliwiec가 보고 Next.js 연동 관련 이슈를 close를 했기 때문에 일단은 적용해도 나쁘지 않겠구나라고 생각한다.

이번 포스팅을 통해 nest-next룰 사용해서 server는 Nest.js와 clinet는 Next.js를 사용하는 간단한 웹앱을 만들어보도록 하겠다.

---

기본 셋팅

일단은 빈 디렉토리에서부터 Next.js, Nest.js, nest-next를 차례로 설정하는 것은 하지 않으려고 한다.
Next.js용 tsconfig 따로, Nest.js용 tsconfig 따로 설정(compilerOptions의 module 설정을 달리 해줘야한다)하고,
nodemon 등 여러 패키지를 설정하고 그외에 여러가지로 설정하기가 너무 번거롭기 때문에,
nest-next의 example을 그대로 가져온 다음에 입맛에 맞게 커스텀하려고 한다.

nest-next example 가져오기

먼저 nest-next repository에서 통으로 다운받거나 자신의 github repository로 clone한 다음 examples/basic만 따로 가져온다.

(나는 nest-next-example이라고 디렉토리명을 바꿨다)

그리고 해당 디렉토리에 들어가서 node 패키지들를 내려받는다.

npm i

그 다음 npm 명령어(npm run dev)로 실행 후,
예제 프로젝트가 정상적으로 실행되는지 확인해보자.

http://localhost:3000로 접속하면 아래와 같이 Hello, World!가 뜬다.

여기까지 잘 따라왔다면 반은 끝난 것이다.
(개발은 원래 설정이 반이다 ^^…)