# Next.jsのインストールとESLint・Prettierのセットアップ

## この記事の概要

App Routerを使うNext.jsプロジェクトのセットアップ手順をまとめた記事です。アプリの種類に依らず共通して役立つ項目を中心に記しています。

- ESLintの設定
- Prettierの設定

Tailwind CSSを使った構成で説明しています。Tailwindを使わない場合は適宜読み替えてください。

この記事は次の環境で作業した内容を元にしています:

- macOS 15.2
- Node 20.15.1
- pnpm 10.19.1
- Next.js 16.0.0
- Tailwind CSS 4.1.16

## Next.jsアプリケーションの作成

次のコマンドで新しいNext.jsアプリを作成します。`my-app` は任意の名前に置き換えてください。

```bash:Terminal
npx create-next-app@latest my-app --ts --tailwind --eslint --app --turbopack --src-dir --import-alias '@/*' --use-pnpm --skip-install --react-compiler
```

作成後、プロジェクトに移動して依存をインストールします:

```bash:Terminal
cd my-app
pnpm install
```

### create-next-app のオプション

| オプション             | 説明                                                                |
| ---------------------- | ------------------------------------------------------------------- |
| `--ts`                 | TypeScript プロジェクトを生成します（`tsconfig.json` などを追加）。 |
| `--tailwind`           | Tailwind CSS の初期設定を追加します。                               |
| `--eslint`             | ESLint の初期設定を追加します。                                     |
| `--app`                | App Router（`app/` ディレクトリ）構成でテンプレートを作成します。   |
| `--turbopack`          | Turbopack をバンドラーとして有効化します（利用可能な場合）。        |
| `--src-dir`            | ソースを `src/` 配下に配置する構成にします。                        |
| `--import-alias '@/*'` | `@/*` を `src/*` にマップする import エイリアスを設定します。       |
| `--use-pnpm`           | `pnpm` をパッケージマネージャに選択してプロジェクトを生成します。   |
| `--skip-install`       | 依存の自動インストールをスキップしテンプレートのみ生成します。      |
| `--react-compiler`     | React Compilerを有効にします。                                      |

詳しくは[公式のドキュメント](https://nextjs.org/docs/app/api-reference/cli/create-next-app#reference)を参照してください。

## .npmrc を設置

```text:.npmrc
public-hoist-pattern[]=*eslint*
public-hoist-pattern[]=*prettier*
```

pnpm v10系では、この `.npmrc` がないとVS Code の ESLint 拡張が正しく動かないケースがあります。

::link-card[https://zenn.dev/s_takashi/articles/vscode-pnpm-v10-eslint]

## npm 周辺ツールの設定

`npm-check-updates` や `sort-package-json` をローカルにインストールせずに使う方法です。`package.json` に次のスクリプトを追加すると便利です:

```json:package.json
"scripts": {
  "format:package": "NODE_OPTIONS='--no-warnings=ExperimentalWarning' pnpm dlx sort-package-json",
  "ncu": "pnpm dlx npm-check-updates"
}
```

これで次のコマンドが使えます:

- `pnpm ncu` — `package.json` の依存を最新に更新（書き換え）
- `pnpm format:package` — `package.json` の項目を整列

## コードフォーマットのための設定

`pnpm format` でプロジェクトのファイルをフォーマットできるように、Prettier を開発依存として追加します。

```bash:Terminal
pnpm add -D -E prettier eslint-config-prettier
```

これで [Prettier](https://prettier.io/) と [eslint-config-prettier](https://github.com/prettier/eslint-config-prettier) が追加されます。続けて設定ファイルを作成・編集します。

### package.jsonを修正

下記のようにスクリプトを追加すると、`pnpm format` で整形と ESLint の自動修正が実行できます。

```json:package.json
"scripts": {
  "lint:fix": "eslint --fix",
  "prettier": "prettier --write --ignore-unknown .",
  "prettier:check": "prettier --check --ignore-unknown .",
  "format": "pnpm prettier && pnpm lint:fix"
}
```

### eslint.config.mjs　を修正

`eslint-config-prettier` をESLint設定に追加します。

```js:eslint.config.mjs
// ...
import eslintConfigPrettier from "eslint-config-prettier";

const eslintConfig = defineConfig([
  ...nextVitals,
  ...nextTs,
  eslintConfigPrettier,
  // ...
]);
```

### .prettierrc.yamlを作成

次のような Prettier 設定を用意します。

```yaml:.prettierrc.yaml
trailingComma: 'es5'
tabWidth: 2
semi: true
singleQuote: true
jsxSingleQuote: false
arrowParens: 'always'
printWidth: 100
```

### .prettierignoreを作成

Prettierの適用を除外するために `.prettierignore` を用意します。

```none:.prettierignore
.vercel
.next
pnpm-lock.yaml
```

### .vscode/settings.jsonの修正

VS Code では次の設定を追加すると保存時に自動フォーマット・自動修正が動きます（拡張機能が必要）。

```json:.vscode/settings.json
{
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },
  "editor.tabSize": 2
}
```

## Typescriptのimportを綺麗にするための設定

```bash:Terminal
pnpm add -D -E eslint-plugin-import eslint-plugin-unused-imports
```

これらのプラグインを導入すると、importの並び替えや未使用importの検出が可能になります。`eslint.config.mjs` に次のように追加してください:

```js:eslint.config.mjs
import eslintPluginImport from 'eslint-plugin-import'
import eslintPluginUnusedImports from 'eslint-plugin-unused-imports'

// ...

const eslintConfig = [
  // ...
  {
    plugins: {
      import: eslintPluginImport,
      'unused-imports': eslintPluginUnusedImports,
    },
    rules: {
      'better-tailwindcss/no-unregistered-classes': ['error', { detectComponentClasses: true }],
      'unused-imports/no-unused-imports': 'error',
      'import/order': [
        'error',
        {
          groups: [
            'builtin',
            'external',
            'internal',
            ['parent', 'sibling'],
            'object',
            'type',
            'index',
          ],
          'newlines-between': 'always',
          alphabetize: { order: 'asc', caseInsensitive: true },
        },
      ],
    },
    settings: {
      'better-tailwindcss': {
        entryPoint: 'src/styles/globals.css',
      },
    },
  },
  // ...
]
```

## Tailwind CSSのためのESLintの設定

`eslint-plugin-better-tailwindcss` プラグインを使うと、次のような恩恵があります:

- Tailwindクラスの順序を自動で整える
- 存在しないクラス名や誤ったクラス名を検出
- 重複や競合するクラスを検出

### eslint-plugin-better-tailwindcss をインストール

例として `eslint-plugin-better-tailwindcss` をインストールし、`eslint.config.mjs` に設定を追加する例です:

```bash:Terminal
pnpm add -D -E eslint-plugin-better-tailwindcss
```

```js:eslint.config.mjs
import eslintPluginBetterTailwindcss from 'eslint-plugin-better-tailwindcss'

// ...

const eslintConfig = [
  // ...
  {
    plugins: {
      'better-tailwindcss': eslintPluginBetterTailwindcss,
    },
    rules: {
      ...eslintPluginBetterTailwindcss.configs['recommended-error'].rules,
      'better-tailwindcss/no-unregistered-classes': ['error', { detectComponentClasses: true }],
    },
    settings: {
      'better-tailwindcss': {
        entryPoint: 'src/app/globals.css',
      },
    },
  },
  // ...
]
```

## VS Codeの拡張をインストール

- [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)  
  ESLintのエラーを表示できるようになります。
- [Prettier - Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)  
  Prettierによるコードフォーマットができるようになります。
- [Tailwind CSS IntelliSense](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss)  
  Tailwind CSSのクラス名の自動補完などができるようになります。

コマンドラインから拡張機能をインストールする場合は次のようにします:

```bash:Terminal
code --install-extension dbaeumer.vscode-eslint
code --install-extension esbenp.prettier-vscode
code --install-extension bradlc.vscode-tailwindcss
```