Next.js Typescript Tailwindcss Eslint Prettier初期セットアップ
はじめに
本記事へのアクセスありがとうございます!
今回は以下の初期設定について説明します。
・Next.js
・Typescript
・Tailwindcss
・ESlint
・Prettier
上記に加えて、next-themesライブラリを用いたダークモードの実装までをゴールとします。
前提条件として
$ npx create-next-app 好きな名前
を実行した後を想定しております。
Typescript導入
まずはNextでTypescriptを用いるために、以下のコマンドでTypescriptをインストールします。
yarn add -D typescript @types/react @types/react-dom @types/node
次にtsconfig.jsonを作成します。
$ touch tsconfig.json
作成後にyarn devすると、tsconfig.json内が上書きされるので確認してください。
また、next-env.d.tsも自動で作成されます。
tsconfing.json内は各々の環境に合わせて、設定し直してください。
ここでは、あくまで参考例として記載します。
{
"compilerOptions": {
"target": "es5",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"strict": true,
"baseUrl": ".",
"forceConsistentCasingInFileNames": true,
"noEmit": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve"
},
"include": ["src", "next-env.d.ts", "**/*.ts", "**/*.tsx"],
"exclude": ["node_modules"]
}
最後に既存のファイル拡張子を変更していきます
pages/_app.js -> pages/_app.tsx
pages/index.js -> pages/index.tsx
pages/api/hellow.js -> pages/api/hello.tsx
再度 yarn dev を実行し立ち上がれば TypeScript の導入は完了です。
Tailwindcssの導入
まずはTailwindcssに必要なものをインストールします。
$ yarn add tailwindcss postcss autoprefixer
次に以下のコマンドを叩きます。
$ npx tailwindcss init -p
すると、tailwind.config.js postcss.config.jsが作成されるので確認してください。
tailwind.config.jsの中身を変更します。
module.exports = {
purge: ['./src/**/*.{js,ts,jsx,tsx}'],
darkMode: 'class', // or 'media' or 'class'
theme: {},
variants: {
extend: {},
},
plugins: [],
}
globals.css を下記のように上書きします。
@tailwind base;
@tailwind components;
@tailwind utilities;
ESlintとPrettierの導入
ESLint, Prettierに必要なものをインストールしていきます。
$ yarn add -D eslint prettier eslint-config-prettier
$ yarn add -D eslint-plugin-{react,react-hooks}
$ yarn add -D @typescript-eslint/{parser,eslint-plugin}
ESlintの設定
まずは.eslintrc.jsonと.eslingtignoreを作成します。
ご自身でカスタマイズできますが、今回は省略して一般的なものを使います。
{
"env": {
"es6": true,
"node": true,
"browser": true,
"commonjs": true
},
"globals": {
"Atomics": "readonly",
"SharedArrayBuffer": "readonly",
"React": "writable"
},
"parser": "@typescript-eslint/parser",
"parserOptions": {
"ecmaVersion": 2018,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true
}
},
"settings": {
"react": {
"version": "detect"
}
},
"plugins": ["react-hooks", "react", "@typescript-eslint", "prettier"],
"extends": [
"eslint:recommended",
"plugin:react/recommended",
"plugin:@typescript-eslint/recommended",
"plugin:@typescript-eslint/eslint-recommended",
"plugin:react-hooks/recommended",
"plugin:prettier/recommended"
],
"rules": {
"prettier/prettier": [2, { "singleQuote": true, "semi": false }],
"react/react-in-jsx-scope": 0,
"react/display-name": 0,
"react/prop-types": 0,
"@typescript-eslint/explicit-function-return-type": 0,
"@typescript-eslint/explicit-member-accessibility": 0,
"@typescript-eslint/indent": 0,
"@typescript-eslint/member-delimiter-style": 0,
"@typescript-eslint/no-explicit-any": 1,
"@typescript-eslint/no-var-requires": 2,
"@typescript-eslint/no-use-before-define": 0,
"no-console": [
2,
{
"allow": ["warn", "error"]
}
]
},
"overrides": [
{
"files": ["*.js"],
"rules": {
"@typescript-eslint/no-var-requires": "off",
"@typescript-eslint/explicit-function-return-type": "off"
}
}
]
}
**/node_modules/*
**/out/*
**/.next/*
Prettierの設定
まずは.prettierrc.jsonと.prettierignoreを作成します。
こちらも好みでカスタマイズ可能です。
{
"semi": false,
"trailingComma": "all",
"singleQuote": true,
"printWidth": 100,
"tabWidth": 2
}
node_modules
.next
yarn.lock
package-lock.json
public
ダークモードの設定
まずは必要なものをインストールします。
$ yarn add next-themes
import '../styles/globals.css'
import { ThemeProvider } from 'next-themes'
import { AppProps } from 'next/app'
function App({ Component, pageProps }: AppProps) {
return (
<ThemeProvider attribute="class">
<Component {...pageProps} />
</ThemeProvider>
)
}
export default App
import Document, { Html, Head, Main, NextScript } from 'next/document'
export default class MyDocument extends Document {
render() {
return (
<Html lang="ja">
<Head>
<meta name="description" content="Hello, World!" />
</Head>
// ⬇︎ ここでダークモード時の背景色を指定。
<body className="bg-white dark:bg-gray-800">
<Main />
<NextScript />
</body>
</Html>
)
}
}
ダークモードに切り替える用のボタンを実装します。
import { useTheme } from 'next-themes'
export const Button: React.FC = () => {
const { theme, setTheme } = useTheme()
return (
<>
<button
onClick={() => {
setTheme(theme === 'light' ? 'dark' : 'light')
}}
>
darkMode
</button>
</>
)
}
おわり
お疲れ様です。
これで一連のセットアップが完成しました。
上記に加えてTestをする時などは臨機応変にパッケージをインストールしてみてください。
少しでもお役に立てたら幸いです。
おしまい。
Discussion