next.js + typescript + yern-berry setting

1. $ npx create-next-app@latest
   해당 command를 입력하면 Next에 설정할 옵션을 고를 수 있다. 이 말은 --typescript를 입력하지 않아도 된다는 것이다.

   
   What is your project named? my-app
   Would you like to use TypeScript with this project? No / Yes
   Would you like to use ESLint with this project? No / Yes
   Would you like to use Tailwind CSS with this project? No / Yes
   Would you like to use `src/` directory with this project? No / Yes
   Use App Router (recommended)? No / Yes
   Would you like to customize the default import alias? No / Yes

2. $ yarn init -2

   -2는 yarn-berry를 의미한다. .yarn 폴더와 .pnp 파일이 생성된다.

   

   package.json에서 dependencies와 scripts가 삭제되었다면 복구하고 yarn install을 실행한다.

    // package.json
        {
          "name": "project-name",
          "packageManager": "yarn@3.5.1",
          "version": "0.1.0",
          "private": true,
          "scripts": {
            "dev": "next dev",
            "build": "next build",
            "start": "next start",
            "lint": "next lint"
          },
          "dependencies": {
            "@types/node": "20.2.5",
            "@types/react": "18.2.7",
            "@types/react-dom": "18.2.4",
            "eslint": "8.41.0",
            "eslint-config-next": "13.4.4",
            "next": "13.4.4",
            "react": "18.2.0",
            "react-dom": "18.2.0",
            "typescript": "5.0.4"
          }
        }
	

3. (선택) $ yarn dlx @yarnpkg/sdks vscode
Cannot find namespace 'React' 에러가 나타날 수 있다. workspace가 아닌 vscode의 typescript 버전을 사용하고 있기 때문이다. cmd+shift+p를 눌러 workspace 버전을 선택할 수도 있으나 선택하는 버튼이 보이지 않는다면 위의 명령어를 입력하면 된다. 오른쪽 하단에 workspace 버전 사용할래? 하고 물어보는 Alert가 뜨는데, 이때 Allow를 선택한다.

   

4. (선택) nvm use 18

   node 14 버전을 사용할 때 Node.js 16.14+ is required for Yarn PnP 3.20+. 에러가 나왔다. 최신 LTS 버전을 사용하면 해결된다.

5. .gitignore 수정 (링크)

   .yarn 파일을 그대로 올리지 않아도 된다. clone 받은 사용자가 $ yarn을 하면 package.json에 따라 .yarn 파일을 생성하여 사용할 수 있다.

참고

• Next 공식 문서