1. nextjs 프로젝트 설정

   ⇒ repo는 소문자로만 가능 !!! ㅠ

   npx create-next-app@latest . 
   

2. npm 라이브러리 설치

   • react-query
   • react-query-dev-tool
   • scss
   • axios
   • recoil

   npm i @tanstack/react-query
   npm i @tanstack/react-query-devtools
   npm install --save-dev sass
   npm install axios
   npm install recoil
   

3. 경로 설정

4. eslint, prettier 설정

   eslint 설정

   Nextjs, Typescript 프로젝트에 Prettier + ESlint 설정하기

   npm install -D prettier eslint-plugin-prettier eslint-config-prettier
   npm i -D @typescript-eslint/parser @typescript-eslint/eslint-plugin
   

   prettier 설정

   npm install --save-dev @trivago/prettier-plugin-sort-imports
   

5. import order 설정

6. PR, 이슈 템플릿 설정

7. css 기본 설정

   resetcss ⇒ https://meyerweb.com/eric/tools/css/reset/

8. next.js 환경변수 ⇒ 추후에 필요할 때

9. github action, CI/CD ⇒ 추후에 필요할 때

10. 허스키, lint-stage

    https://typicode.github.io/husky/getting-started.html

    https://xionwcfm.tistory.com/359#husky 깔기-1

//.eslintrc.json
{
	"ignorePatterns": ["next.config.js"] // 추가
}

1. sass option

   

Styling: Sass

1. 페이지 url 및 라우팅 폴더

최종 페이지 url)