Next.js + Tailwind CSS + Prettierのプロジェクト作成手順

# 概要
タイトルの通り、Next.js (TypeScript) + Tailwind CSS + Prettierのプロジェクトを作成する機会が何度か有り、毎回同じような作業をするので、ミニマムな手順を残すことにしました。

# 手順

作業はnpmではなくyarnで行うものとして記述していく。
prettierの動作確認などが分かりやすくなるので、gitで管理し、各項目毎にcommitすることをおすすめする。

## 1. Next.js

### 1.1. プロジェクトディレクトリ作成

実際にはgithub上でリポジトリを作成し、git cloneしてから作業を行うことが多いので、ディレクトリ作成から手順を書くことに。(その場合、mkdirせず、cloneしたディレクトリにcdで移動)

```sh
mkdir {project}
cd {project}
```

### 1.2. インストール

TypeScriptを利用するのでオプションで指定する。
(npxがグローバルインストールされていない場合はそちらを先に行う必要有り。)


```sh
npx create-next-app@latest --typescript .
```

### 1.3. 動作確認

ブラウザからlocalhost:3000にアクセスすると、Next.jsのデモ画面が表示される。
確認したらCtrl+cで一旦終了しておく。

```sh
yarn dev
```

## 2. srcディレクトリの追加

デフォルトではプロジェクトルート直下にpagesディレクトリが配置されるが、好みでないためsrcディレクトリを作成し、その中にpagesを移動する。
※ 「src」という名前のディレクトリならばNext.jsがサポートしているので問題ない。

https://nextjs-ja-translation-docs.vercel.app/docs/advanced-features/src-directory


### 2.1. pagesディレクトリの移動


```sh
mkdir src
mv pages src
```

### 2.2. ソースの修正

stylesのパスが変わるため変更する。
(デモ画面だが、セットアップが完了するまで動作確認に利用するため変更しておく。)

```diff
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -1,4 +1,4 @@
-import '../styles/globals.css'
+import '../../styles/globals.css'
 import type { AppProps } from 'next/app'
```

### 2.3. 動作確認

1と同様の画面が表示される。
確認したらCtrl+cで一旦終了しておく。

```sh
yarn dev
```

## 3. TailwindCSS

公式の手順で進める。

https://tailwindcss.com/docs/guides/nextjs

### 3.1. インストール

```sh
yarn add --dev tailwindcss postcss autoprefixer
yarn tailwindcss init -p
```

### 3.2. 設定ファイルへのパス追加

```diff
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,6 +1,9 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: [],
+  content: [
+    "./src/**/*.{js,ts,jsx,tsx}",
+  ],
   theme: {
     extend: {},
   },
```

### 3.3. global.cssにTailwindの読み込み追加

デフォルトのスタイルは不要なので削除し、Tailwindの読み込みだけにしておく。

```diff
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -1,26 +1,3 @@
-html,
-body {
-  padding: 0;
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
-    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
-}
-
-a {
-  color: inherit;
-  text-decoration: none;
-}
-
-* {
-  box-sizing: border-box;
-}
-
-@media (prefers-color-scheme: dark) {
-  html {
-    color-scheme: dark;
-  }
-  body {
-    color: white;
-    background: black;
-  }
-}
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
```

### 3.4. デフォルトHomeモジュールの修正

Tailwindが適用されていることが確認できるように、デモのソースを修正する。
"text-3xl font-bold"等のクラスが適用されて、太字 + アンダーラインで表示されるはず。

```diff
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,71 +1,10 @@
 import type { NextPage } from 'next'
-import Head from 'next/head'
-import Image from 'next/image'
-import styles from '../styles/Home.module.css'

 const Home: NextPage = () => {
   return (
-    <div className={styles.container}>
-      <Head>
-        <title>Create Next App</title>

... (中略)

-        </a>
-      </footer>
-    </div>
+    <h1 className="text-3xl font-bold underline">
+      Hello world!
+    </h1>
   )
 }
```

### 3.5. Home.module.cssの削除

不要になったスタイルファイルを削除する。
gitで管理していれば以下のようにgit rmで。そうでなければrm。

```sh
git rm styles/Home.module.css
```

### 3.6. 動作確認

画面に太字でHello worldが表示されれば確認完了。

```sh
yarn dev
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/802246/10b69cdc-dbce-1647-e618-3fed815cb95d.png)


## 4. Prettierの導入

ESLintはNext.jsと共に自動でインストールされるので、Prettierだけ導入する。

### 4.1. インストール

ESLintと併用することになるので、eslint-config-prettierもインストールする。

```sh
yarn add --dev prettier eslint-config-prettier
```

### 4.2. ESLintの設定にprettierを追加

ESLintとprettierが競合しないようにESLint側にprettierの設定を追加する。
この時、prettierを後ろに配置する。

```diff
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -1,3 +1,6 @@
 {
-  "extends": "next/core-web-vitals"
+  "extends": [
+    "next/core-web-vitals",
+    "prettier"
+  ]
 }
```

### 4.3. CLI コマンドの修正

yarn lintコマンドを修正して、srcディレクトリだけが対象になるようにする。それ以外のlintは不要なので。
また、ESLintとprettierを同時実行するfmtコマンドを追加する。

```diff
--- a/package.json
+++ b/package.json
@@ -6,7 +6,8 @@
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint"
+    "lint": "next lint --dir src",
+    "fmt": "next lint --dir src && prettier --write src"
   },
   "dependencies": {
     "next": "12.2.5",
```

### 4.4. ESLint & Prettierコマンド実行

セミコロンの抜けなどが修正されてソースが書き換わる。
git diffすると分かりやすい。

```sh
yarn fmt
```

## 終わりに

これ以上はお好みでの設定になるかと思います。
お疲れさまでした。