Next.js + Typescript + ESLint + Prettier + Jest + tesing-library 환경 설정

Tech stack

• Next.js)
• Typescript
• ESLint + Prettier + airbnb Style Guide
• Jest + testing-library

프로젝트 셋업 순서

1. 기본 nextjs 프로젝트 생성

npx create-next-app

2. typescript 설정 추가

• 의존성 추가

npm install --save-dev typescript @types/react @types/node

• tsconfig.json 빈 파일 생성

touch tsconfig.json

• tsconfig.json 설정 (config 설정 참고)]

{
  "compilerOptions": {
    "target": "ES2017",
    "lib": ["es6", "dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": false,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "ESNEXT",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "baseUrl": ".",  // 해당 url 기준으로 paths에 절대경로 alias
    "paths": {
      "@components/*": ["./src/components/*"],
      ...
    }
  },
  "exclude": ["node_modules"],
  "include": ["**/*.ts", "**/*.tsx", "next-env.d.ts", "next.config.js"]
}