nextjs 최신 버전 프로젝트 설정 (eslint, pretter)

 

프로젝트를 생성할 경로에서 다음 명령어 실행

npx create-next-app@latest

 

 

yarn, pnpm을 사용하려면 다음 옵션 추가하여 실행

npx create-next-app@latest --use-pnpm
npx create-next-app@latest --use-yarn

 

 

1. 프로젝트 이름 설정

 

2. typescript를 사용하면 runtime 에러를 최소화 할 수 있다.

 

3. typescript 문법 검사를 위해 eslint 설정

 

4. tailwindcss의 사용 추천 ! 

 

5. page router 대신 app router 설정 권장

 

6. ./src/* 경로를 @/*로 사용할 수 있도록 설정한다. 

import Card from "@/components/card";

 

---

prettier 설치

pnpm add --save-dev prettier
pnpm add --save-dev eslint-config-prettier

 

eslint는 문법검사기로 문법만 검사하고 formatter는 prettier에게 위임하는 것이 좋다고 생각한다.

 

1. eslint-config-prettier를 설치하는 이유는 eslint의 formatter 기능과 충돌하는 것을 막기 위해서이다.

 

2. 현재 eslint에서 문법검사 + formatter 두 역할을 다 할 수 있지만 추후에 formatter 기능은 지원하지 않을 계획이라고 한다.

 

.eslintrc.json 파일 수정

{
  "extends": ["next", "prettier"]
}

 

 

기본 옵션을 변경해서 사용하려면 .prettierrc 파일 최상단에 생성

{
  "printWidth": 80,
  "semi": true,
  "singleQuote": false,
  "trailingComma": "all",
  "tabWidth": 2,
  "bracketSpacing": true,
  "endOfLine": "auto",
  "useTabs": false,
  "arrowParens": "avoid"
}

 

 

webstorm에 eslint, prettier 활성화

경로: File > Settings > 왼쪽 검색창에서 eslint, prettier 검색

 

---

프로젝트 실행

pnpm run dev

 

http://localhost:3000 접속해서 다음 페이지가 뜨면 성공 !