본문 바로가기

프로젝트/오심테(오늘의 심리테스트)

Nextjs 12버전으로 프로젝트 시작하기(feat. npm run dev 에러)

반응형

기획도 대략적으로 마쳤으니 이제 Nextjs를 사용해 프로젝트를 만들어보자. 

타입스크립트를 사용할까 했지만, Nextjs를 배우는 것이 목표이기 때문에 타입스크립트는 나중에 확실히 공부하기로 하고 이번 토이프로젝트는 자바스크립트로 진행하기로 하였다.

https://velog.io/@arenacast/Next.JS-Typescript-%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0

 

Next.js + TypeScript 시작하기

본 내용은 nextJS 와 nextJS + typescript 를 비교하기 위해 학습용 으로 작성되었습니다. 아래 내용대로 따라하시면 기본적인 세팅방법과 개발을 배우실 수 있습니다. 작업환경 OS : win10 Tool : vscode 기본

velog.io

현재 13버전까지 나오긴했지만 개인적으로 공부할 때는 2~3년전의 안정적인 버전을 사용해 공부하는 것이 좋다고 하여 이전 버전인 12버전을 선택하게 되었다.

npx create-next-app@12

자, 원래 대로라면 npm run dev를 통해 프로젝트를 실행시키면 된다고 하는데...

나는 자꾸 이런 에러가 떴다. 스택오버플로우도 보고 블로그들도 보고 별 짓을 다했다. 솔직히 30분 넘게 헤맸다.

알고보니, node의 버전이 너무 낮아서 생기는 문제로, node 버전을 업데이트 시켜주면 된다고 한다. 참고로 내가 쓰고 있던 node 버전은 12였다 ㅋㅋㅋㅋ 거의 세기말..

nvm install node

node 버전을 업데이트 해준 후 npm run dev를 통해 실행시켜주니

그리도 보고싶었던 이 화면을 볼 수 있었다. 내가 이거 보려고 30분 이상 헤맸단 말이야? ^^ 리액트로 첫 토이 프로젝트인 투두 앱을 만들 때도 실행하는데 애를 먹었다. 그때랑 똑같다 어쩜..진짜 데자뷰다 데자뷰...

여하튼 잘 해결해서 다행이다. 이제 Nextjs 사용법을 공부해가며 기능 하나씩 만들어가면 될 것 같다.

반응형