NextJS 프로젝트 초기 설정 (feat 리액트 쿼리, 리덕스, 타입스크립트)

npx create-next-app@latest .

뒤에 .을 찍어주면 현재 폴더에 next 프로젝트를 생성할 것이라는 걸 알려주는 표시이다.

그러면 프로젝트 이름을 어떤 걸로 할 거냐는 질문을 받지 않고 현재 폴더에 모든 게 설치된다.

 

base) ➜  next_test git:(main) ✗ npx create-next-app@latest .
✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like to use `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to customize the default import alias (@/*)? … No / Yes
✔ What import alias would you like configured? … @/*
Creating a new Next.js app in /Users/joyudam/next_test.

Using npm.

Initializing project with template: default-tw 


Installing dependencies:
- react
- react-dom
- next

Installing devDependencies:
- typescript
- @types/node
- @types/react
- @types/react-dom
- autoprefixer
- postcss
- tailwindcss
- eslint
- eslint-config-next

 

typescript와 eslint, tailwind css를 사용한다고 했기 때문에 

관련된 패키지들이 함께 설치된다.

 

devDependencies에 설치된 패키지 중 @types로 시작하는 것들은 무엇일까?

 

@types가 붙은 패키지들은 JavaScript로 작성된 해당 라이브러리의 타입 정보를 제공한다.

일반적으로  JavaScript로 작성된 해당 라이브러리 타입 정보를 포함하지 않기 때문에 필요하다.
이러한 패키지들을 설치하면, TypeScript 컴파일러가 라이브러리의 타입 정보를 이해하고 적용할 수 있게된다.

 

이렇게 설치를 하고 나면 아래와 같은 package.json 파일이 생성된다.

{
  "name": "next_test",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "react": "^18",
    "react-dom": "^18",
    "next": "14.1.0"
  },
  "devDependencies": {
    "typescript": "^5",
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "autoprefixer": "^10.0.1",
    "postcss": "^8",
    "tailwindcss": "^3.3.0",
    "eslint": "^8",
    "eslint-config-next": "14.1.0"
  }
}

이제 eslint와 prettier 설정을 해보자.

 

1) eslint

next 프로젝트를 생성할 때 eslint를 사용하겠냐는 물음에 yes로 답했기에 

eslint가 미리 설치되어있다.

 

우리는 typescript를 같이 사용해주기 위해 @typescript-eslint 플러그인을 추가로 설치해줬다.

npm i -D @typescript-eslint/parser @typescript-eslint/eslint-plugin

 

typescript-eslint란?

간단하게 말하자면 TypeScript코드를 린팅해주는 도구이다.

 ESLint와 TypeScript는 각자의 parser를 이용해

서로 다른 AST(Abstract Syntax Tree)를 만들어 내는데,

이러한 다른 AST들 때문에 생겨나는 문제점 때문에 생겨난 것이

 typescript-eslint이고

이로 인해 ESLint와 TypeScript를 함께 사용할 수 있다.

 

@typescript-eslint/parser

TypeScript코드에 대한 AST생성

 

@typescript-eslint/eslint-plugin

typescript-eslint의 규칙들을 사용할 수 있게 해준다

 

 

 

 미리 생성되어 있는 .eslintrc.json 파일에 프로젝트에 적용하고 싶은 규칙들을 적어주면 된다.

우리 팀의 규칙은 다음과 같다.

{
  "env": {
    "browser": true,
    "es2021": true,
    "node": true
  },
  "extends": [
    "next",
    "prettier", // eslint-config-prettier prettier와 중복된 eslint 규칙 제거
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:react/jsx-runtime",
    "plugin:prettier/recommended", // ts 권장
    "plugin:@typescript-eslint/recommended", // eslint의 포매팅을 prettier로 사용.
    "prettier/@typescript-eslint"
  ],
  "parser": "@typescript-eslint/parser",
  "overrides": [],
  "parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module",
    "project": "./tsconfig.json"
  },
  "plugins": ["react", "@typescript-eslint", "prettier"],
  "rules": {
    "react/react-in-jsx-scope": "off", // JSX를 사용할 때 React가 일일이 import되지 않으면 에러(리액트 17 이후부터는 안해줘도 됨)-> off
    "no-unused-vars": "warn", // 사용하지 않는 변수가 있을 때 에러 -> warn
    "react/prop-types": "warn" // prop의 타입을 정의해주지 않으면 에러 -> warn
  },
  "settings": {
    "react": {
      "version": "detect"
    }
  }
}

 

2) prettier

먼저, eslint와 prettier를 함께 사용하면 규칙들이 충돌되기 때문에

이를 방지하기 위한 패키지를 함께 설치해야한다.

 

npm install -D prettier eslint-plugin-prettier eslint-config-prettier

 

 eslint-plugin-prettier : eslint에서 prettier랑 충돌할 규칙 비활성화

eslint-config-prettier : 포매팅할때 prettier 사용하게 하기

 

이 두 개와 prettier를 함께 설치한 뒤에, .prettierrc 파일을 만들어 프로젝트에 적용할 설정들을 적어준다.

 

{
  "printWidth": 120,
  "tabWidth": 2,
  "singleQuote": true,
  "trailingComma": "all",
  "semi": true
}

 

 

 

아래의 프로젝트는 nextjs & typescript 프로젝트에

redux, react-query, axios, react-hook-form, react-hot-toast 등의

외부 라이브러리를 설치한 케이스이다.

 

nextjs에서 redux 설치 시 

next-redux-wrapper가 필요하다고 하여 같이 설치해줬다. 

 

최종 완성된 package.json

 

{
  "name": "today-trip",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@redux-devtools/extension": "^3.3.0",
    "@tanstack/react-query": "^5.17.15",
    "@tanstack/react-query-devtools": "^5.17.18",
    "axios": "^1.6.5",
    "next": "14.1.0",
    "next-redux-wrapper": "^8.1.0",
    "react": "^18",
    "react-dom": "^18",
    "react-hook-form": "^7.49.3",
    "react-hot-toast": "^2.4.1",
    "react-redux": "^9.1.0"
  },
  "devDependencies": {
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "@types/react-redux": "^7.1.33",
    "@typescript-eslint/eslint-plugin": "^6.19.0",
    "@typescript-eslint/parser": "^6.19.0",
    "autoprefixer": "^10.0.1",
    "eslint": "^8.56.0",
    "eslint-config-next": "14.1.0",
    "eslint-config-prettier": "^9.1.0",
    "eslint-plugin-prettier": "^5.1.3",
    "postcss": "^8",
    "prettier": "^3.2.4",
    "redux-logger": "^3.0.6",
    "tailwindcss": "^3.3.0",
    "typescript": "^5"
  }
}

참고 : https://gingerkang.tistory.com/97

[TypeScript] typescript-eslint의 이해와 사용

https://velog.io/@xmun74/Next.js-TS%EC%97%90%EC%84%9C-ESLint-Prettier-%EC%84%A4%EC%A0%95%ED%95%98%EA%B8%B0

Next.js + TS에서 ESLint, Prettier 설정하기 (+ styled-components, airbnb, husky, lint-staged)

https://velog.io/@rmaomina/prettier-eslint-settings

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