Typescript, eslint, prettier 및 tailwind를 사용하도록 NextJS 프로젝트 설정

어떻게 될까요?



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 프로젝트가 있습니다.

좋은 웹페이지 즐겨찾기