먼저 프로젝트를 진행할 폴더를 생성해 줍니다.
vscode로 접속해서 npm init 으로 package.json 을 생성해 줍니다.
세부 적인 속성은 프로젝트에 맞게 설정해 줍니다
npm i next 로 next를 설치해줍니다.
설치가 완료되면 dependencies 에 next가 추가된것을 확인할 수 있습니다.
또한 추가적으로 package-lock.json 과 node_modules가 프로젝트 폴더에 생성되었습니다.
스크립트 명령어를 등록해 줍니다.
next.js 로드는 next를 이용하고
빌드는 next build 를 이용합니다.
그 다음 pages를 폴더를 만들고 그 안에 index.js 를 만들어 줍니다.
next.js를 실행하기 위해서는 pages 폴더가 필요합니다.
pages 폴더를 생성하면 pages 안에 있는 파일들은 각각 하나의 페이지로 만들어줍니다.
index.js 는 도메인의 첫페이지의 해당합니다. 리액트 컴포넌트 형태로 만들어야 하며, next.js를 설치하게 되면 리액트 환경을 지원하기 때문에 import React from 'react'를 작성하지 않아도 리액트사용이 가능합니다.
`npm run dev'를 통해 페이지 로드를 해보겠습니다.
pages 안에 있는 index.js가 로드 된것을 확인할 수 있습니다.
next를 직접설치하는 방법 외에도 create next app을 통해 next.js 환경을 구성하는 방법도 있습니다. 각자의 상황에 맞게 취사선택하는 것이 좋습니다.
마지막으로 기본적인 eslint 설정을 해줍니다.
ESLint는 자바스크립트 코드에서 발견되는 문제시되는 패턴들을 식별하기 위한 정적 코드 분석 도구입니다. 코드 작성 시 올바르지 않은 문법, 사용되지 않은 변수, 코드 저장시 들여쓰기 밑 띄어쓰기 정리 등 코딩 컨벤션을 유지하는데 도움을 주는 도구입니다.
명령어를 통해 eslint를 설치해 줍시다
npm i eslint -D
npm i eslint-plugin-import -D
npm i eslint-plugin-react -D
npm i eslint-plugin-react-hooks -D
설치가 완료되면 .eslintrc 파일을 만들어줍니다.
.eslintrc 를 통해 eslint 세부 설정이 가능합니다.
