[Next.js] Setting : yarn create next-app (+ yarn dev 실행 에러 해결하기)

0319 next.js 심화프로젝트 

 

팀장님과 함께 프로젝트 초기 셋팅을 하면서 Next.js 프로젝트를 생성했다.

 

강의에서 배운건 npx create-next-app 명령어 였지만, 이후 튜터님은 yarn add 등으로 라이브러리를 설치하셨고 ㅠㅠ

이런 경우  package.lock.json 과 yarn.lock 모두 생겨서 충돌이 있지않을까 우려되었담.. 

(그전에 충돌이 나서 지운 적이 있었기 때문에..)

 

물론 이전에도 yarn create 로 할 때 yarn 에서의 문제가 있어 npx create 를 권고하셨었지만 

다들 yarn 을 많이 쓰고 있기도 하고.. !

 

그래서 yarn create next-app 을 해보기로 했다. 

 

---

🪄 1. yarn 으로 create next-app 하는 방법 알아보기

 

1) 우선 공식문서 installation 에서는 npx create 만 나와있긴 하다

https://nextjs.org/docs/getting-started/installation

Getting Started: Installation | Next.js

(근데 그냥 npx create-next-app 이 정석이고 이게 맞는 거 같다 ...)

 

 

2) 그런데 아래 공식문서 api reference -> 에 있는 create-next-app 에서는 

https://nextjs.org/docs/pages/api-reference/create-next-app

API Reference: create-next-app | Next.js

yarn create next-app

의 명령어를 알려주고 있다 ... !?!

뭔가 다른것인지 잘 모르겠다. pages router 탭 메뉴 안에서 볼 수 있기도 하고 ... 

 

 

3) 하지만 yarn 공식 홈페이지에서도

https://classic.yarnpkg.com/en/package/create-next-app-ts

create-next-app-ts

 

npx create-next-app으로 알려주고 있다 !?

npx 로 create 하고 그냥 yarn 명령어를 그대로 쓰면 실행된다.

(실제로 저번 프젝때도 npx create했지만 yarn dev 등 명령어는 그대로 썼었다

다만 이후에 명령어로 yarn add 라이브러리등.. 을 한다면 lock 파일은 2개가 생성될것 ㅠㅠ) 

 

---

 

여하간 일단 시도 !!

yarn create 로 next.js 프로젝트를 생성해보자 

 

🐰 2.  yarn create-next-app 로 next.js 프로젝트 생성하기

어쨋든, yarn create next-app을 하면 프로젝트는 잘 생성된다. (그리고 typescript 등 사용 할건지 yes,no 해주면 된다)

그런데 npm create .... @latest 처럼 yarn create-next-app@latest  써도 yarn 역시 latest 버젼으로 잘 설치되긴 하는데....

다만 약간의 문제가 있다.

package.json 에서

"next": "^14.1.3",    =>  "latest"

버전 넘버가 아니라 latest 와 같이 문자열로 뜬다 ..!

(하지만 yarn.lock 을 확인해보면 14.1.3 이런식으로 버젼은 잘 설치되어있다)

하지만 package.json 에서 버젼을 바로 볼 수 없다는 거 ㅠㅠ

이 때 yarn add next  이렇게 한번 더 설치해주면 다시 latest   =>   14.1.3 과 같이 버젼으로 뜨긴한다.  

 

 

🫧 3. yarn create next-app 이후 dev 실행되지 않는 문제

특히 yarn create next-app 을 하고나서 

yarn dev 로 dev 모드가 실행되지 않았다 .. 스크립트에도 문제는 없었다. 

  "scripts": {

    "dev": "next dev",

    "build": "next build",

    "start": "next start"

  },

 

 방법 :    yarn add next.js 로 해결 !

(스택오버플로우 https://stackoverflow.com/questions/59996216/how-do-i-install-the-latest-version-of-next-js-with-yarn 에서 보고 해결했다. ) 

---

 

4. 결론

여튼

yarn 으로 하니 yarn add next.js 도 해줘야하고, latest 로 설치하는 것도 찜찜(?) 하고 

그냥.. 배운대로 npx create-next-app@latest 을 쓰는 게 나을 것 같다는 교훈을 얻었다 ..ㅎㅎ