기획도 대략적으로 마쳤으니 이제 Nextjs를 사용해 프로젝트를 만들어보자.
타입스크립트를 사용할까 했지만, Nextjs를 배우는 것이 목표이기 때문에 타입스크립트는 나중에 확실히 공부하기로 하고 이번 토이프로젝트는 자바스크립트로 진행하기로 하였다.
https://velog.io/@arenacast/Next.JS-Typescript-%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0
현재 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 사용법을 공부해가며 기능 하나씩 만들어가면 될 것 같다.
'프로젝트 > 오심테(오늘의 심리테스트)' 카테고리의 다른 글
[Nextjs] 공통 컴포넌트(헤더, 네비게이션 바) 적용 및 동적 라우팅 (0) | 2023.05.20 |
---|---|
[Tailwind CSS] 전체 화면 스크롤 바 없애기(Header 고정) (0) | 2023.05.19 |
[Tailwind CSS] nextjs is missing required "width" property & Error: Invalid src prop "" on `next/image` (0) | 2023.05.19 |
[NextJS & Tailwind CSS] 헤더 & 네비게이션 바 만들기 (0) | 2023.05.18 |
[토이 프로젝트] 오심테(오늘의 심리테스트) 기획기 (0) | 2023.05.17 |