NEXT + TS + ESLint 초기 세팅

CNA + TS

yarn create next-app --typescript

Axios

yarn add axios

ESLint

yarn add -D eslint@^7.11.0 lint-staged prettier eslint-config-prettier eslint-plugin-prettier@^3.4.0 eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-simple-import-sort

yarn add -D @typescript-eslint/eslint-plugin @typescript-eslint/parser

.prettierrc, .eslintrc.json파일 생성 및 작성

이후 추가적인 라이브러리 설치

기타 세팅

절대경로 세팅

.tsconfig에 다음의 코드 추가

"baseurl":"."
"paths": {
      "src/*": ["./src/*"],
      "public/*": ["./public/*"],
}

NEXT SVG 설정

yarn add babel-plugin-module-resolver

yarn add babel-plugin-inline-react-svg

src/types에 image.d.ts파일 생성

.babelrc생성 후 다음의 코드 추가

{
  "presets": ["next/babel"],
  "plugins": [
    "inline-react-svg",
    [
      "module-resolver",
      {
        "alias": {
          "src": "./src",
          "public": "./public"
        }
      }
    ]
  ]
}

.babelrc 다음과 같이 수정

{
  "presets": ["next/babel"],
  "plugins": [
    "inline-react-svg",
    [
      "module-resolver",
      {
        "alias": {
          "src": "./src",
          "public": "./public"
        }
      }
    ]
  ]
}