Next.jsでプロジェクト作成（tailwiwind CSSインストール）

## この記事の目的
- Next.jsでブログを作成したときの備忘録
- 最初の環境構築(tailwiwind CSSインストール)について

## 概要
- プロジェクト作成
- tailwiwind CSSインストール

## プロジェクト作成
Next.jsのプロジェクト作成`blog`の部分はプロジェクト名です
```zsh
npx create-next-app blog
```
下記のように出てきますが全てEnterを押します
```zsh
✔ Would you like to use TypeScript with this project? … No / Yes
✔ Would you like to use ESLint with this project? … No / Yes
✔ Would you like to use `src/` directory with this project? … No / Yes
✔ Would you like to use experimental `app/` directory with this project? … No / Yes
✔ What import alias would you like configured? … @/*
```
<details><summary>作成されたpackage.jsonクリックして表示</summary><div>

```package.json
{
  "name": "blog",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@types/node": "18.15.0",
    "@types/react": "18.0.28",
    "@types/react-dom": "18.0.11",
    "eslint": "8.36.0",
    "eslint-config-next": "13.2.4",
    "next": "13.2.4",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "typescript": "4.9.5"
  }
}
```
</div></details>


### 作成したプロジェクトに移動し`npm run dev`でNext.jsアプリケーションを実行
```zsh
cd blog
npm run dev
```

```zsh
> blog@0.1.0 dev
> next dev

ready - started server on 0.0.0.0:3000, url: http://localhost:3000
Attention: Next.js now collects completely anonymous telemetry regarding usage.
This information is used to shape Next.js' roadmap and prioritize features.
You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:
https://nextjs.org/telemetry
```
実行すると上記のような感じで出ると思うので記載されているURLを叩く（ここでは`http://localhost:3000`）
以下のような画面が表示されることを確認する
![nextjs.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/462658/7c687623-1aa7-538b-bb28-839fb40db7ed.png)

## tailwiwind CSSインストール
tailwiwind CSSインストールについては[tailwind公式ドキュメント（Next.js）](https://tailwindcss.com/docs/guides/nextjs)に従って行なっています。
先ほどの`npm run dev`で起動したサーバーをctrl+Cでサーバー落とす
### 下記のコマンドでtailwiwind CSSインストール
これで`tailwindcss` `postcss` `autoprefixer`の3つのパッケージがインストールされます
```zsh
npm install -D tailwindcss postcss autoprefixer
```
### 設定ファイルを作成します
これで`tailwind.config.js`と`tsconfig.json`が作成されます
```zsh
npx tailwindcss init -p
```
<details><summary>作成されたpostcss.config.jsクリックして表示</summary><div>

```postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}
```
</div></details>

<details><summary>変更したtailwind.config.jsクリックして表示</summary><div>

```tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
}


```
</div></details>

### tailwind.config.jsにテンプレートのパスを設定する
tailwind.config.jsを以下のように変更します。
```tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx}",
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",

    // Or if using `src` directory:
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

```
こちらは[tailwind公式ドキュメント（Next.js）](https://tailwindcss.com/docs/guides/nextjs)に記載しているものをコピーして貼り付けている作業になります

### CSSにTailwindを追加する
`globals.css`の内容を全て削除し下記のように変更する
```globals.css
@tailwind base;
@tailwind components;
@tailwind utilities;
```
デフォルトで存在している`Home.module.css`ファイルは使用しないので削除しておく

### プロジェクトでTailwindが使用できるか確認
`pages/index.tsx`を下記のように編集し`http://localhost:3000/`で確認する
わかりやすいように公式ドキュメントのスタイルに文字を赤くする`text-red-600`を追加しています
```pages/index.tsx
import { Inter } from 'next/font/google'

const inter = Inter({ subsets: ['latin'] })

export default function Home() {
  return (
    <h1 className="text-3xl font-bold underline text-red-600">
      Hello world!
    </h1>
  )
}
```
再度`npm run dev`を実行し確認すると次のようにスタイルが当たっているのが確認できるかと思います。
※わかりやすいように拡大したスクショを載せています
![tailwindCSS.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/462658/31244249-21f4-2cfd-1395-95a03f13bf9c.png)

ちなみにtailwindCSSのスタイルについては、こちらの[サイト](https://tailwindcomponents.com/cheatsheet/)に載っているので参考にしてみてください。

## その他
プロジェクトに後から追加したものについても下記に載せました
- [Google Fonts使い方](https://qiita.com/pikimaru/items/c9a67a496dea20bcc06f)
- [React Iconsでアイコンを使ってみる](https://qiita.com/pikimaru/items/bffc051a248f8e2ab2b2)