🚀 next.js 를 yarn berry와 typescript로 시작해버리기

vercel의 nextjs를 yarn berry로 시작해보자!

1. create-nexp-app 해버리기

yarn , node, npm 설치가 되어있다는 전제하에 진행됩니다.

아래 명령을 통해 프로젝트 디렉토리를 생성해버리죠.

yarn create next-app --typescript

인풋창이 나오면 기대하는 디렉토리명/프로젝트명을 입력해주세요.
전 nextjs-project 을 입력할거에요!

⚠️ 오류가 발생한다면, 상위 디렉토리에 package.json이나 yarn.lock이 있는건 아닌지 의심해보세요. (전 2시간 삽질했어요 😭 )

2. 마이그레이션 to yarn berry

yarn berry를 쓰면 왜 좋을까?

zero install 을 활용하기 위해서 yarn berry를 세팅합니다.

# 최신버전의 yarn(berry) 사용 설정
yarn set version stable

# 패키지 설치
yarn

# 위에서 node_modules가 생긴다면 아래를 package.json에 추가
"packageManager": "yarn@3.1.1",

# 아래를 그냥 실행(.yarnrc.yml 에 pnp 내용 추가)
echo 'nodeLinker: "pnp"' >> .yarnrc.yml

# yarn typescript 플러그인 설정
yarn plugin import typescript
yarn add -D typescript
yarn

# 타입/모듈 추론을 위한 yarn berry의 vscode 세팅
yarn dlx @yarnpkg/sdks vscode

# 개발모드로 띄워보기
yarn dev

👆 위처럼 오류가 발생한다면 👇 아래를 봐주세요.

3. vercel/nextjs yarn 2 pnp support

vercel/next.js가 yarn berry를 매끄럽게 지원해주지는 않는 듯 한데, 최신 버전에서는 patch되어 정상 동작이 되는 듯 합니다.

찾아본 기록 👇
https://github.com/vercel/next.js/issues/20955
https://github.com/vercel/next.js/issues/31552

한 줄 요약
yarn add next@12.0.4 로 업데이트해주면 해결 👍

4. zero install을 위하여

https://yarnpkg.com/getting-started/qa/#which-files-should-be-gitignored

.gitignore에 아래 내용을 추가해주면 다음부터 clone받을 때, 빠르게 설치 가능해요

.yarn/*
!.yarn/cache
!.yarn/patches
!.yarn/plugins
!.yarn/releases
!.yarn/sdks
!.yarn/versions

5. github 링크

위 작업된 내용은 여기에서 확인할 수 있어요 👀
오셔서 ⭐️ 눌러주시는 거 잊지 마세요 😁