Next.js 初期設定まとめ

毎回Nextの初期設定をするのですが、何回も他のサイトを見るのも大変なので、
自分用にまとめました🙌
読んでみて、もっと効率良い方法あるよ！
便利な方法あるよ！という方はコメントで教えていただけると幸いです🙏

# 目次
1. [Nextアプリの作成 TypeScript](#nextアプリの作成-typescript)
1. [prettierの設定](#prettierの設定)
1. [tailwindCSSの導入](#tailwindcssの導入)
1. [ディレクトリ構成の変更](#ディレクトリ構成の変更)
1. [MaterialUIの導入](#materialuiの導入)

::: note warn
ディレクトリの変更に関してですが、
Nextのバージョンによっては、`src`ディレクトリを最初に作るか聞かれるので
そちらで作成していただく方が楽です！
:::

また、本記事の設定で作成したテンプレートリポジトリもありますので
そちらを使われたい方はどうぞ！

https://github.com/YuukiHayashi0510/next.ts.mui-tailwind-template

# Nextアプリの作成
後でアプリ名を聞かれるので、アプリ名の入力は必要ないです！
```zsh:ターミナル
# npm
npx create-next-app@latest --ts
# yarn
yarn create next-app --typescript
```



# prettierの設定
ここはコードの好みに関する部分です。
クォートをダブルクォートにするか、シングルクォートにするか
みたいな話になります。

## インストール
```zsh:ターミナル
# npm の場合
npm install -D prettier eslint-config-prettier

# yarn の場合
yarn add -D prettier eslint-config-prettier
```

## .prettierrcの設定
```js:.prettierrc
{
  "semi": false,
  "singleQuote": true,
  "jsxSingleQuote": true
}
```
<table>
    <thead>
        <th>項目</th>
        <th>はたらき</th>
    </thead>
    <tbody>
        <tr>
            <td>"semi": false</td>
            <td>セミコロンを外す</td>
        </tr>
        <tr>
            <td>"singleQuote": true</td>
            <td>TSファイルのシングルクォートを有効にする<br>（ダブルクォートを強制的に変更する）</td>
        </tr>
        <tr>
            <td>"jsxSingleQuote": true</td>
            <td>jsx(tsx)ファイルのシングルクォートを有効にする（同上）</td>
        </tr>
    </tbody>
</table>

## lintとprettierの衝突回避
```js:.eslintrc.json
{
  "extends": ["next/core-web-vitals", "prettier"]
}
```
`"prettier"`を追記

## .prettierignoreの設定
CSSは整形してほしくないので、ここに記述し、除外
```js:.prettierignore
*.css
```

# tailwindCSSの導入
tailwindCSSをよく使うので、残してます！
使いたい人だけ使ってください！

## インストール
```zsh:ターミナル
# npm
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

# yarn
yarn add -D tailwindcss postcss autoprefixer
yarn tailwindcss init -p
```

## パスの追加
```js:tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}
```
`component`がない場合は、記載なしでOK

## tailwindのprettier追加
tailwindCSSにも便利なprettierがあります。
追加したい場合は、prettierのインストールが済んでいれば
以下のコマンドのみでOKです！
```zsh:ターミナル
yarn add -D prettier-plugin-tailwindcss
```

もしprettier自体も設定していない場合は
以下のコマンドです。

```zsh:ターミナル
yarn add -D prettier prettier-plugin-tailwindcss
```

### ディレクトリ構成を変更していた場合
`pages`を大元のディレクトリではなく、`src`の直下に
`pages`, `components`を置いた場合に使ってください！

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

## globals.cssに追記
```css:globals.css
@tailwind base;
@tailwind components;
@tailwind utilities;
```




# ディレクトリ構成の変更
`pages`を大元のディレクトリではなく、どうしても`src`の直下に
`pages`, `components`を置きたい場合に使ってください！

::: note warn
Nextのバージョンによっては、`src`ディレクトリを最初に作るか聞かれるので
そちらで作成していただいても構いません。
:::

```js:tsconfig.json
{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    // 暗黙のany型（何も型定義がない場合に勝手anyにすること）を禁止
    "noImplicitAny": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"]
}

```

# MaterialUIの導入
## シンプルな導入
```zsh:ターミナル
# npm
npm install @mui/material @emotion/react @emotion/styled
# yarn
yarn add @mui/material @emotion/react @emotion/styled
```

## styled-componentを使う場合
```zsh:ターミナル
# npm
npm install @mui/material @mui/styled-engine-sc styled-components
# yarn
yarn add @mui/material @mui/styled-engine-sc styled-components
```

## Material-Iconを使う場合
```zsh:ターミナル
# npm
npm install @mui/icons-material
# yarn
yarn add @mui/icons-material
```



# 参考文献
https://nextjs.org/docs/basic-features/typescript

https://fwywd.com/tech/next-eslint-prettier

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

https://maku.blog/p/qgvamzc/

https://mui.com/material-ui/getting-started/installation/