Next.js ESLint・Prettier設定完全ガイド【2026】

Next.jsプロジェクトにESLintとPrettierを導入する手順を、2026年の最新構成でまとめました。

create-next-app が標準で用意する eslint-config-next にPrettierを競合なく組み込み、保存時の自動整形、husky + lint-staged によるコミット前チェックまで、コピペで動く形で解説します。

Reactの汎用的な手順は ReactにESLint・Prettierを導入する完全ガイドにまとめています。本記事はNext.js特有の設定（eslint-config-next / flat config）に絞って解説します。

独学に限界を感じたら

プログラミング教室がおすすめ。挫折せず最短で実力を伸ばせます。

Next.jsのLint事情（2026年）

Next.jsは create-next-app の時点でESLintが組み込まれており、eslint-config-next によって Core Web Vitals やNext.js特有のアンチパターン（next/image の誤用、next/link の使い方など）を検知してくれます。

一方でPrettierは含まれないため、自分で足す必要があります。

ESLintとPrettierは役割が違います。ESLintは「品質」、Prettierは「見た目（整形）」を担当します。

統合用の eslint-plugin-prettier は現在非推奨なので、整形はPrettier、競合ルールだけ eslint-config-prettier で無効化する分離構成にします。

① Next.js プロジェクトを作成する

npx create-next-app@latest my-app
cd my-app

対話プロンプトで TypeScript / ESLint / App Router を「Yes」にしておきます。この時点で eslint.config.mjs（flat config）と eslint-config-next が入った状態になります。

② Prettier をインストールして設定する

npm install -D prettier eslint-config-prettier

プロジェクト直下に .prettierrc.json を作成します。

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

整形対象外は .prettierignore に書きます。

.next
node_modules
package-lock.json

③ eslint.config.mjs に Prettier 連携を追加する

Next.js 15以降の create-next-app は、FlatCompat を使って eslint-config-next を読み込む eslint.config.mjs を生成します。ここに eslint-config-prettier を配列の最後に追加します。

import { dirname } from 'path'
import { fileURLToPath } from 'url'
import { FlatCompat } from '@eslint/eslintrc'
import eslintConfigPrettier from 'eslint-config-prettier'

const __filename = fileURLToPath(import.meta.url)
const __dirname = dirname(__filename)

const compat = new FlatCompat({
  baseDirectory: __dirname,
})

const eslintConfig = [
  ...compat.extends('next/core-web-vitals', 'next/typescript'),
  eslintConfigPrettier,
]

export default eslintConfig

eslintConfigPrettier を最後に置くのがポイントです。後勝ちで整形系ルールが無効化され、ESLintとPrettierの整形が衝突しなくなります。

④ package.json にスクリプトを追加する

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "lint": "next lint",
    "format": "prettier --write ."
  }
}

next lint は eslint-config-next を使ったNext.js公式のLintコマンドです。npm run format でPrettierによる一括整形ができます。

⑤ VSCode で保存時に自動整形する

拡張機能 Prettier - Code formatter（esbenp.prettier-vscode） と ESLint（dbaeumer.vscode-eslint） を入れ、プロジェクト直下に .vscode/settings.json を作成します。

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  }
}

リポジトリに含めればチーム全員に同じ設定が共有され、保存時に Prettier整形 → ESLint自動修正 が走ります。

⑥ husky + lint-staged でコミット前に自動チェック

エディタ設定を入れ忘れた人にも効かせるため、Gitのコミット時に強制的にLint/整形をかけます。

npm install -D husky lint-staged
npx husky init

npx husky init（husky v9以降）で .husky/pre-commit が生成されます。中身を書き換えます。

# .husky/pre-commit
npx lint-staged

package.json に lint-staged 設定を追加します。ステージ済みファイルだけを対象にするため高速です。

{
  "lint-staged": {
    "*.{ts,tsx,js,jsx}": [
      "eslint --fix",
      "prettier --write"
    ],
    "*.{json,css,md}": [
      "prettier --write"
    ]
  }
}