어떻게 될까요?

Typescript, eslint, prettier 및 tailwind를 사용하도록 Next.js를 설정하는 방법을 배웁니다.

시작

NextJS 프로젝트 초기화

npx create-next-app my-project --typescript
cd my-project

더 예쁘고 에슬린트 설치

npm install --save-dev prettier eslint-config-prettier eslint-plugin-prettier
npm install --save-dev eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-import-resolver-typescript

구성 파일

.eslintrc

{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": [
    "plugin:@typescript-eslint/recommended",
    "next",
    "next/core-web-vitals",
    "prettier"
  ],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": 12,
    "sourceType": "module"
  },
  "plugins": ["@typescript-eslint"]
}

.prettierrc.js

module.exports = {
  printWidth: 80,
  semi: true,
  singleQuote: true,
  tabWidth: 2,
  useTabs: false,
};

tailwind 설치 및 초기화

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
npx tailwindcss init -p

구성 파일

tailwind.config.js

module.exports = {
  mode: 'jit',
  purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

globals.css에 순풍 추가

globals.css

@tailwind base;
@tailwind components;
@tailwind utilities;

완료, 이제 typescript, eslint, prettier 및 tailwind가 포함된 NextJS 프로젝트가 있습니다.