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内は各々の環境に合わせて、設定し直してください。
ここでは、あくまで参考例として記載します。

tsconfig.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の中身を変更します。

tailwind.config.js

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

globals.css を下記のように上書きします。

/styles/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を作成します。
ご自身でカスタマイズできますが、今回は省略して一般的なものを使います。

.eslintrc.json

{
  "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"
      }
    }
  ]
}

.eslintignore

**/node_modules/*
**/out/*
**/.next/*

Prettierの設定

まずは.prettierrc.jsonと.prettierignoreを作成します。
こちらも好みでカスタマイズ可能です。

.prettierrc.json

{
  "semi": false,
  "trailingComma": "all",
  "singleQuote": true,
  "printWidth": 100,
  "tabWidth": 2
}

.prettierignore

node_modules
.next
yarn.lock
package-lock.json
public

ダークモードの設定

まずは必要なものをインストールします。

$ yarn add next-themes

src/pages/_app.tsx

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

src/pages/_document.tsx

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>
    )
  }
}

ダークモードに切り替える用のボタンを実装します。

/src/components/Button.tsx

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をする時などは臨機応変にパッケージをインストールしてみてください。
少しでもお役に立てたら幸いです。
おしまい。