소개

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의 JIT 모드 및 purge 설정

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

_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에서 설정

Eslint 도입

yarn add eslint eslint-config-prettier --dev

WebStorm에서 설정

참고