[Next.js+ typescript][FE 아무것도 모른채 Next 13으로 시작하기-1] next-app 프로젝트 설정 vscode, CNA, eslint

 

 

Java Spring으로 백엔드 공부중에 FE가 아주 간단하게 필요했지만

 

vscode 환경에서 Next.js 13 + yarn + typescript + EsLint + import alias 설정으로 Nest app을 생성하겠다.

vscode, npm, node.js, yarn 설치 및 Next.js의 아주 간단한 이해 등은 했다고 가정하고 CNA부터 시작.

 

CNA

 

Next.js app을 나의 디렉토리에 생성 및 초기설정하는 아래의 과정을 CNA라고하는데

콘솔과 대화를 주고받는 것과 같은 방식으로 초기 설정을 하도록 도와준다.

이 때 첫 질문은 프로젝트의 이름이고, 이 프로젝트 이름은  생성된 나의 next app의 root directory가 된다. 추후 yarn 명령어를 사용할때 정확히 해야하는 부분이므로 기억해두자

 

참고로 nextsbl 폴더에서 CNA를 진행한 후 project name을 nextsbl이라고하면 아래 사진 하단에 있는 것처럼 nextsbl\\nextsbl 이 root directory가 된다.

따라서 그냥 프로젝트 소스가 모여있는 디렉토리 (ex : source) 에서 CNA를 진행해야함

 

src/ directory 쓰지 않고,

App Router 사용하고,

import alias 활용하여 절대경로로 import 할거다.

 

 

EsLint

 

이후 eslint를 추가

 

yarn add -D @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-config-next eslint-config-prettier

 

yarn add 후 eslintrc.json 파일에 입력하여 기본적으로 있는 eslint 확장에다가 typescript에대한 규칙들도 추가했다.

{
  "env": {
    "browser": true,
    "es6": true,
    "node": true
  },
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint"],
  "extends": [
    "next/core-web-vitals",
    "plugin:@typescript-eslint/recommended",
    "prettier"
  ],
  "rules": {
    "@typescript-eslint/no-unused-vars": "error",
    "@typescript-eslint/no-explicit-any": "error" 
  }
}

 

 

참고로 vscode 확장 설치와 현재 내 next 프로젝트에 yarn 명령어를 통해 eslint나 prettier 를 추가하여 설치, 설정하는것은 별개의 작업이며, vscode딴에서, next project 딴에서 모두 이루어져야 EsLInt의 오류 발견 기능이 작동한다.

 

만약 EsLint(오류 발견)와 Prettier(코드 포매팅)가 충돌하는 경우는

1. EsLint 설정의 extends
2. vscode의 default formatter

이 두가지를 확인하자.

 

config 역할은 tsconfig.json이 한다.

여기서 절대경로 설정 지금은 baseUrl = ‘.’ 일케 되어잇다

 

아래는 실행 방법, next app의 root directory로 이동한 다음 실행해야함에 주의

PS C:\\Users\\sbl\\source\\repos\\nextsbl> cd nextsbl
PS C:\\Users\\sbl\\source\\repos\\nextsbl\\nextsbl> yarn run dev

 

 

package.json

 

현재 라이브러리 버전들 (package.json)

{
  "name": "nextsbl",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@types/node": "20.5.3",
    "@types/react": "18.2.21",
    "@types/react-dom": "18.2.7",
    "autoprefixer": "10.4.15",
    "eslint": "8.47.0",
    "eslint-config-next": "13.4.19",
    "next": "13.4.19",
    "postcss": "8.4.28",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "tailwindcss": "3.3.3",
    "typescript": "5.1.6"
  }
}