nextjs 세팅하기

새 프로젝트 시작겸 자주 사용하는 세팅 정리

nextjs + typescript + eslint + prettier + emotion

nextjs + typescript 설치

yarn create next-app --typescript

dependencies에 없어도 되는 패키지들은 devDependecies로 옮겨준다

"devDependencies": {
		"@types/node": "18.14.2",
		"@types/react": "18.0.28",
		"@types/react-dom": "18.0.11",
		"eslint": "8.35.0",
		"eslint-config-next": "13.2.3",
		"typescript": "4.9.5"
	}

eslint 설정

• typescript 파서 설정

//.eslintrc.json
{
  ...
  "parser": "@typescript-eslint/parser",
  "parserOptions": [
    ...
    "project": ["tsconfig.json"]
  ],
  ...
}

• airbnb 규칙 추가 (종속성 포함)

 yarn add -D eslint-config-airbnb eslint-config-airbnb-typescript @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-plugin-import eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-jsx-a11y

//.eslintrc.json
{
  ...
  "extends": [
    ...
    "airbnb",
    "airbnb/hooks",
    "airbnb-typescript"
  ],
  ...
}

• prettier 설정

yarn add -D prettier eslint-config-prettier

//.eslintrc.json
{
  ...
  "extends": [
    ...
    "prettier"
  ],
  ...
}

//.prettierrc.json
{
  "singleQuote": false,
  "semi": true,
  "useTabs": false,
  "printWidth": 80,
  "tabWidth": 2,
  "arrowParens": "avoid",
  "endOfLine": "auto"
}

• 위설정대로하면 기본 next.config.js 파일이 린팅에 걸려 보기 싫으니까 .eslintignore파일에 추가해준다.

//.eslintignore
next.config.js

최종 .eslintrc.json

{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:@typescript-eslint/recommended",
    "next/core-web-vitals",
    "airbnb",
    "airbnb/hooks",
    "airbnb-typescript",
    "prettier"
  ],
  "plugins": ["@typescript-eslint", "prettier", "react"],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "project": ["tsconfig.json"]
  },
  "rules": {
    "react/react-in-jsx-scope": "off",
    "react/jsx-props-no-spreading": "off"
    "import/prefer-default-export": "off",
    "@typescript-eslint/no-use-before-define": "off",
  }
}

Emotion

패키지 설치

yarn add @emotion/styled @emotion/react

Next 12버전 부터는 Rust 컴파일러 기반의 웹 전용 오픈형 플랫폼 SWC를 사용하게 되면서, 기존 Next(v12 이전)Emotion을 사용하기 위해 필요하던 @emotion/babel-plugin 바벨 플러그인을 대신하여 SWC 컴파일러를 사용할 수 있다.

//next.config.js
const nextConfig = {
...
  compiler: {
    emotion: true,
  },
  ...
};

css속성을 사용하려면 린트에서 에러가 떠서 린트 설정 추가

.eslintrc.json
{
...
	"rules": {
    	...
    	"react/no-unknown-property": ["error", { "ignore": ["css"] }]
        
  	}
...