Example of Next.js with Yarn Berry
-
mkdir [project-name]
andcd [project-name]
-
yarn init -2
-
yarn add next react react-dom
-
pakage.json 에
"scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }
위 내용 추가
-
mkdir pages && touch pages/index.tsx
혹은mkdir src && mkdir src/pages && touch pages/index.tsx
-
위의 index.tsx 파일 내에
function HomePage() { return <div>Welcome to Next.js!</div>} export default HomePage
내용 추가
-
yarn dev
https://yarnpkg.com/getting-started/migration
-
yarn set version berry
를 통해 yarn berry 로 전환 -
.yarnrc.yml
파일에nodeLinker: node-modules
추가yarnrc
혹은npmrc
를 사용중이었다면yarnrc.yml
로 마이그레이션 (참고)Yarnrc files (named this way because they must be called
.yarnrc.yml
) are the one place where you'll be able to configure Yarn's internal settings. While Yarn will automatically find them in the parent directories, they should usually be kept at the root of your project (often your repository). Starting from the v2, they must be written in valid Yaml and have the right extension (simply calling your file.yarnrc
won't do). -
yarn install
을 통해 lockfile 마이그레이션
Plug'n'Play로 전환하여 Zero-installs 기능을 활용할 수 있습니다.
yarn dlx @yarnpkg/doctor
를 통해 프로젝트에서 잘못된 방식으로 패키지를 사용하는 경우가 있는지 검사.yarnrc.yml
파일에서nodeLinker
설정 삭제
nodeLinker
가 없거나 pnp로 설정되어 있다면 이미 Plug'n'Play 사용중.
yarn install
.gitignore
수정-
w Zero-Installs
.yarn/* !.yarn/cache !.yarn/patches !.yarn/plugins !.yarn/releases !.yarn/sdks !.yarn/versions
-
w/o Zero-Installs
.pnp.* .yarn/* !.yarn/patches !.yarn/plugins !.yarn/releases !.yarn/sdks !.yarn/versions
-
- 변경사항 커밋
https://yarnpkg.com/getting-started/editor-sdks
아래 과정이 선행되지 않을 시 정상적으로 패키지의 정보를 불러오지 못함.
- ZipFS 확장 설치
yarn dlx @yarnpkg/sdks vscode
커맨드를 통해 .yarn/sdks 디렉토리 생성- TypeScript 버전을 "Use Workspace Version" 로 설정