소개

Next.js 에서 TypeScript Tailwind CSS Prettier ESLint 를 도입하면서 프로젝트를 시작하는 단계입니다.
자신은 에디터에 JETBRAINS 의 WebStorm 를 사용하고 있으므로 WebStorm 에서의 설정 방법도 기술하고 있습니다.

Typescript가 도입된 Next.js 프로젝트 시작

yarn create next-app プロジェクト名 --typescript

프로젝트 디렉토리로 이동

cd プロジェクト名

Tailwind CSS 도입

yarn add -D tailwindcss@latest postcss@latest autoprefixer@latest

yarn tailwindcss init -p

tailwind.config.js

postcss.config.js

가 만들어집니다.

tailwind.config.js의 JIT 모드 및 purge 설정

mode: "jit", 추가

purge: [] 의 부분에 설정을 추가.
자신의 경우는 src 부하에서 pages 이나 components 디렉토리등을 관리하고 싶기 때문에, 이하의 기술을 설정하고 있다.
프로젝트의 디렉토리 구성에 맞게 설정합니다.

tailwind.config.js

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

_app.tsx 수정

_app.tsximport '../styles/globals.css'import 'tailwindcss/tailwind.css'로 바꾸기

_app.tsx

import 'tailwindcss/tailwind.css'
import type { AppProps } from 'next/app'

function MyApp({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />
}
export default MyApp

Prettier 소개

yarn add --dev --exact prettier

WebStorm에서 설정

Apply → OK
이제 파일 save 때때로 자동으로 코드 포맷을 해준다.

Eslint 도입

yarn add eslint eslint-config-prettier --dev

WebStorm에서 설정

Apply → OK
이제 파일 save 때로는 린트가 실행됩니다.

참고

고마워요!

htps // // 네 xtjs. 오 rg / 두 cs / 바시 c 훗 아츠레 s / ty ぺ sc 리 pt

h tps : // 싶다 l ぃん dcs ㎃. 코 m / 두 cs / 구이 s / 네 xtjs

htps : // 코 m / 세나 - 안 y / ms / 아 1 굳이 73dc95 6f8

htps : // 이 m/신신 86/이고 ms/c8b1f6b22b1베 f3074c7

htps : // 이 m / 소 rf t / ms / 06377f3b96964964 a 65d