Next.js 미니프로젝트, 초기설정

next.js의 개념들만 알고 적용을 해보지 못해서 혼자라도 작은 프로젝트를 진행 해봐야겠다라는 생각이 들었다.

todolist는 식상하고 새로운게 뭐가 있을까고민하다가 목표를 잡았다. next.js로 지도위치서비스를 만들어보려고한다.

 

만들기 전 next.js의 장점이 뭐일까에 대해서 궁금했는데 차차 알아가보려고 한다.🌝 시작 하기 전 next.js의 기본 세팅을 했다.(어려웠다...공식문서도 보는 버릇해야지..) 나중에 헷갈려 할 나를 위해 정리ㅎ

---

ESLint

npx create-next-app@latest --typescript

1. 난 typescript와 next를 같이 사용할꺼니까 미리 세팅을 해준다.(물론 yarn을 사용해도 된다.)

 저렇게 터미널에 치면 프로젝트 이름을 설정하라고 나온다 원하는 이름을 설정해주고 ESLint를 사용할 것인가?에 대해서도 YES!!

2.설치 후 IDE 터미널창에다가 yarn dev 또는 npm run dev 를 입력해준다. 그러면 localhost:3000이 뜰것이다.

3. 그럼 설치 된 파일 중에 .eslintrc.json에

{
"extends": "next/core-web-vitals",
}

이렇게 설정이 되어있다. 공식문서에도 위의 설정이 개발자들에게 권장되는 사항이라고 하니 저렇게 진행하겠다.

---

Prettier

https://prettier.io/docs/en/install.html

  **ESLint가 코드에 대한 룰이라면 Prettier는 그 코드를 좀 더 깔끔하게 만들어주는 code formatter이다.

1.Prettier를 설치한다.

yarn add --dev --exact prettier

2.echo {}> .prettierrc.json라는 절차에 따라 .prettierrc.json을 최상위에 만들어준다.

이 속성은 본인의 기호에 맞게 설정을 해주면 된다. 공식문서를 참조하자

 

3.next.js의 공식문서에서 eslint-config-prettier를 설치해주어야한다.

 ** 왜냐?ESLint가 code formatting에 대한 룰을 포함하고 있기 때문에 Prettier와 충돌하지 않도록 해주기 위함이다.

yarn add --dev eslint-config-prettier

https://nextjs.org/docs/basic-features/eslint#prettier

Basic Features: ESLint | Next.js

4. .eslintrc.json파일에서 prettier를 추가해준다.

{
"extends": ["next/core-web-vitals", "prettier"]
}

---

이렇게 까지 설정해주고 필요없는 파일들은 마저 삭제해주면된다!😎