Next.js 프로젝트를 ES-Lint, Prettier포함하여 기본설정하기

Next.js는 서버에서 렌더링되는 빠른 React 애플리케이션을 구축하는 데 널리 사용되는 자바스크립트 프레임워크이다. 많은 대기업에서 사용하고 있으며 대규모 개발자 커뮤니티가 기여하고 있다. 이 글에서는 Next.js 설치, eslint 설정, prettier 설정 등 Next.js 프로젝트의 기본 설정 과정을 살펴본다.

Next.js 설치

먼저 프로젝트에 Next.js를 설치하겠다. 이 작업은 노드 패키지 관리자인 npm을 사용하여 수행할 수 있다. 터미널 창을 열고 프로젝트의 루트 디렉토리로 이동한다. 그런 다음 다음 명령을 실행한다.

npm install next

이렇게 하면 프로젝트에 최신 버전의 Next.js가 설치된다.

ESLint 설정

ESLint는 프로젝트에서 일관된 코드 스타일을 적용하는 데 도움이 되는 널리 사용되는 JavaScript 린터이다. 오류를 포착하고 코딩 규칙을 적용할 수 있다. 

프로젝트에 ESLint를 설치하려면 다음 명령을 실행한다.

npm install eslint

다음으로 Next.js 프로젝트에 권장되는 구성을 사용하도록 ESLint를 구성한다. 

npx eslint --init

이제 ESLint의 대화형 설정 프로세스가 시작된다. 인기 있는 스타일 가이드를 사용하는 옵션을 선택하고 에어비앤비 스타일 가이드를 선택한다. 그런 다음 사용 중인 모듈 유형, 환경 및 Lint할 파일 유형에 대한 옵션을 선택한다.

Prettier 설정

Prettier는 코드 서식을 자동으로 지정해 가독성을 높여주는 인기 코드 포맷터이다. 프로젝트에 Prettier를 설치하려면 다음 명령을 실행한다.

npm install prettier

다음으로 ESLint와 함께 작동하도록 Prettier를 구성한다. 프로젝트의 루트 디렉터리에 .prettierrc 파일을 생성하고 다음 내용을 기입한다.

{
  "singleQuote": true,
  "semi": false,
  "tabWidth": 2
}

이렇게 하면 작은따옴표를 사용하고 세미콜론이 없으며 탭 너비가 2가 되도록 Prettier가 구성된다.

마지막으로 ESLint가 Prettier를 사용하도록 구성한다. 프로젝트의 루트 디렉터리에 .eslintrc 파일을 생성하고 다음 내용을 기입한다.

{
  "extends": ["airbnb", "prettier"],
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": "error"
  }
}

이렇게 하면 에어비앤비 스타일 가이드와 Prettier 플러그인을 사용하도록 ESLint가 구성된다. 또한 Prettier 규칙을 오류로 적용한다.

이제 Next.js, ESLint, Prettier의 아주 기본적이 설정이 완료 되었다.