yarn2로 next.js 프로젝트 만들기

지상 최강의 개발자 쥬니니·2021년 9월 26일
next.jsnextjsyarn2
9

해보기

목록 보기
5/5
post-thumbnail

yarn2가 아니면 node.js를 못한다니... 가엾고 딱한 자로다

샘플 프로젝트 링크

yarn2에 꽂혔다.

프로젝트 의존성 전체를 레포지토리에 올릴 수 있다는 사실이 너무나 매력적이라서 yarn2 가 아니면 만족할 수 없는 몸이 되어버렸습니다.

node_modules 땜에 보통 1GB가 넘어갔었는데 이제 그럴 일이 없다니...ㅠㅠ
좀 큰 프로젝트는 yarn install 만 해도 하루종일이었는데 이제 그럴 일이 없다니...

next.js 수동 세팅 됨?

됩니다.

공식 가이드에 Manual Setup 이 존재하기에 그대로 따라하면 됩니다.

웹팩이나 바벨같은 복잡한건 어떡해요?

이건 좀 무서운 부분이긴 했는데, next 자체가 보일러 플레이트 설정을 가지고 있어 webpack 을 설정 안해도 내부에 들어있습니다.
뭐... babel도 없어도 돌아가긴 하는데, jest를 쓰려니 필요해서 어쩔 수 없이 간단하게나마 설치를 해야하긴 했습니다.

그래봤자 yarn add --dev @babel/core @babel/preset-typescript @babel/runtime 선에서 끝날 수 있었습니다.
.babelrc 의 내용물도 이게 다입니다.

{
  "presets": [
    "next/babel",
    "@babel/preset-typescript"
  ]
}

그럼 나머지 무서운 설정들은 어떡해요?

신기하게도 yarn next dev 했더니 그런거 자동으로 만들어줍니다...ㄷㄷ

Question

create-next-app 하면 되는거 아닝교?

create-next-app 하면 yarn1 으로 만들어진다는거 아니요?

그럼 yarn set version berry 하면 되는거 아닝교?

시작부터 node_modules 폴더 만드느라 오래 걸린다는거 아닝교?

아 귀찮은거 아닝교?

그래서 샘플 프로젝트 올려준거 아닝교?

이미 yarn1 으로 쓰고있는데 우째 바꾸는교?

여기 보이소

profile
지상 최강의 개발자 쥬니니
지상 최강의 개발자 쥬니니
이전 포스트

three.js 를 사용해보았다.

5개의 댓글

comment-user-thumbnail
danxer
2021년 10월 18일

덤으로
yarn2가 궁금하신 분께
서비스서비스

https://velog.io/@altmshfkgudtjr/yarn2%EC%99p%80-%ED%95%A8%EA%BB%98-Plug-n-Play%EB%A5%BC-%EC%A0%81%EC%9A%A9%ED%95%B4%EB%B3%B4%EC%9E%90

1개의 답글
comment-user-thumbnail
김지환
2021년 10월 22일

안녕하세요 항상 좋은글 잘 보고있습니다b.
기존의 프로젝트를 yarn berry 마이그레이션 시도 하고 있는데 에러가 납니다...
아마도 추측이건데 next js의 webpack 때문인거 같은 느낌적인 느낌...

혹시 에러 로그 한번 봐주실수 있겠습니까..?

yarn set version berry 후에
.yarnrc.yml 파일에서 nodeLinker: pnp 로 설정한 상황입니다.

yarn next dev ok took 28s at 12:18:46
zsh: correct 'next' to '.next' [nyae]? n
Browserslist: caniuse-lite is outdated. Please run:
npx browserslist@latest --update-db
Error: mini-css-extract-plugin tried to access webpack (a peer dependency) but it isn't provided by its ancestors; this makes the require call ambiguous and unsound.

Required package: webpack
Required by: mini-css-extract-plugin@virtual:1d9168c037c08506cad690e29fd976d3b38a884a672b631ce328ba655d35796417317af720f12d57f0e7cd3ab2976fc12b60f56238e7a04aa9afa12f9ac77003#npm:0.4.3 (via /Users/jihwan.kim/yarn2/.yarn/virtual/mini-css-extract-plugin-virtual-cebe464182/0/cache/mini-css-extract-plugin-npm-0.4.3-a350360081-e79393bcd2.zip/node_modules/mini-css-extract-plugin/dist/)

Ancestor breaking the chain: @zeit/next-css@npm:1.0.1

Require stack:

  • /Users/jihwan.kim/yarn2/.yarn/virtual/mini-css-extract-plugin-virtual-cebe464182/0/cache/mini-css-extract-plugin-npm-0.4.3-a350360081-e79393bcd2.zip/node_modules/mini-css-extract-plugin/dist/index.js
  • /Users/jihwan.kim/yarn2/.yarn/virtual/mini-css-extract-plugin-virtual-cebe464182/0/cache/mini-css-extract-plugin-npm-0.4.3-a350360081-e79393bcd2.zip/node_modules/mini-css-extract-plugin/dist/cjs.js
  • /Users/jihwan.kim/yarn2/.yarn/cache/@zeit-next-css-npm-1.0.1-1d9168c037-c0170c38fb.zip/node_modules/@zeit/next-css/css-loader-config.js
  • /Users/jihwan.kim/yarn2/.yarn/cache/@zeit-next-css-npm-1.0.1-1d9168c037-c0170c38fb.zip/node_modules/@zeit/next-css/index.js
  • /Users/jihwan.kim/yarn2/next.config.js
  • /Users/jihwan.kim/yarn2/.yarn/virtual/next-virtual-ec34a7f2ae/0/cache/next-npm-9.5.3-37b8048ebb-44fe4a5a3b.zip/node_modules/next/dist/next-server/server/config.js
  • /Users/jihwan.kim/yarn2/.yarn/virtual/next-virtual-ec34a7f2ae/0/cache/next-npm-9.5.3-37b8048ebb-44fe4a5a3b.zip/node_modules/next/dist/next-server/server/next-server.js
  • /Users/jihwan.kim/yarn2/.yarn/virtual/next-virtual-ec34a7f2ae/0/cache/next-npm-9.5.3-37b8048ebb-44fe4a5a3b.zip/node_modules/next/dist/server/next.js
  • /Users/jihwan.kim/yarn2/.yarn/virtual/next-virtual-ec34a7f2ae/0/cache/next-npm-9.5.3-37b8048ebb-44fe4a5a3b.zip/node_modules/next/dist/server/lib/start-server.js
  • /Users/jihwan.kim/yarn2/.yarn/virtual/next-virtual-ec34a7f2ae/0/cache/next-npm-9.5.3-37b8048ebb-44fe4a5a3b.zip/node_modules/next/dist/cli/next-dev.js
  • /Users/jihwan.kim/yarn2/.yarn/virtual/next-virtual-ec34a7f2ae/0/cache/next-npm-9.5.3-37b8048ebb-44fe4a5a3b.zip/nodemodules/next/dist/bin/next
    at Function.external_module    .Module.resolveFilename (/Users/jihwan.kim/yarn2/.pnp.cjs:24670:55)
    at Function.external_module    .Module.load (/Users/jihwan.kim/yarn2/.pnp.cjs:24469:48)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at Object. (/Users/jihwan.kim/yarn2/.yarn/virtual/mini-css-extract-plugin-virtual-cebe464182/0/cache/mini-css-extract-plugin-npm-0.4.3-a350360081-e79393bcd2.zip/node_modules/mini-css-extract-plugin/dist/index.js:7:16)
    at Module._compile (node:internal/modules/cjs/loader:1101:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.external_module    .Module._load (/Users/jihwan.kim/yarn2/.pnp.cjs:24519:14)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
1개의 답글
comment-user-thumbnail
ㅎㅍ
2022년 8월 25일

감사합니다. Yarn2는 처음이라 어떻게 시작할지 막막했는데 팁얻고가네요 :)

답글 달기