はじめに
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.jspostcss.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.tsxの
import '../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時にリントが実行される。
参考
ありがとうございました！