N-LAB.

Next.js v16にESLint Flat ConfigとStylisticを導入する

投稿日：2026/02/24

目標

  • Next.js v16にESLint Flat ConfigとStylisticを導入する


条件

  • Next.js v16がインストール済みであること。
  • 利用するフレームワーク、ライブラリのバージョンは以下のとおりです。

・Next.js: 16.1.6
・eslint: 9.39.3
・eslint-config-next: 16.1.6
・typescript-eslint: 8.56.1
・@stylistic/eslint-plugin: 5.9.0

目次

  1. ESLintセットアップ
  2. TypeScriptのESLintセットアップ
  3. ESLint Stylisticのインストール


ESLintセットアップ

1. 以下のコマンドを実行します。 

$ npm i -D eslint eslint-config-next

eslint-config-nextに関する詳細は以下を参照ください。
https://nextjs.org/docs/app/api-reference/config/eslint#setup-eslint

2. eslint.config.mjsを作成します。

// eslint.config.mjs
import { defineConfig, globalIgnores } from 'eslint/config'
import nextVitals from 'eslint-config-next/core-web-vitals'
 
const eslintConfig = defineConfig([
  ...nextVitals,
  // 以下でデフォルトのlint適用外ファイルの上書きを行います
  globalIgnores([
    // 以下はデフォルトでlint適用外になっています
    '.next/**',
    'out/**',
    'build/**',
    'next-env.d.ts',
  ]),
  // 特定のファイルのみルールを適用したい場合は以下のようにファイル単位で記述します
  {
    files: ['**/page.{js,jsx,ts,tsx}'],
    rules: {
      'no-console': 'error',
    },
  },
])
 
export default eslintConfig


eslint-config-nextには以下の3つのルールセットが含まれています。

  1. eslint-plugin-react
  2. eslint-plugin-react-hooks
  3. @next/eslint-plugin-next

各ルールセットでは何が定義されているか、ほかのルールセットは何があるかは以下を参照ください。
https://nextjs.org/docs/app/api-reference/config/eslint#rules

3. package.jsonのscriptsにlintの実行コマンドを追加します。

// package.json
{
  "scripts": {
    "lint": "eslint .",
 　 "format": "eslint . --fix"
  },
}


4. 以下のコマンドを実行してESLintを起動します。

$ npm run lint

コードの修正も行う場合は以下のコマンドを実行します。

$ npm run format


TypeScriptのESLintセットアップ

1. TypeScriptを利用している場合は以下のコマンドを実行してTypeScript用のルールを追加します。 

$ npm i -D eslint-config-next/typescript


2. eslint.config.mjsに以下を追加します。

// eslint.config.mjs
// 以下を追加
import nextTs from 'eslint-config-next/typescript'
const eslintConfig = defineConfig([
  ...nextVitals,
  // 以下を追加
  ...nextTs,


ESLint Stylisticのインストール

1. 以下のコマンドを実行します。 

$ npm i -D @stylistic/eslint-plugin


2. eslint.config.mjsに以下を追加します。

// eslint.config.mjs
// 以下を追加
import stylistic from '@stylistic/eslint-plugin'
const eslintConfig = defineConfig([
  ...nextVitals,
  ...nextTs,
  // 以下を追加
  stylistic.configs['recommended'],


recommendedではデフォルトとして以下が設定されています。ソースコードはこちらを参照ください。

arrowParens = false,
blockSpacing = true,
braceStyle = 'stroustrup',
commaDangle = 'always-multiline',
experimental: enableExperimentalRules = false,
indent = 2,
jsx = true,
pluginName = defaultPluginName,
quoteProps = 'consistent-as-needed',
quotes = 'single',
semi = false,
severity = 'error',


各設定を修正する場合は以下のように記述します。

// eslint.config.mjs
import stylistic from '@stylistic/eslint-plugin'
const eslintConfig = defineConfig([
  ...nextVitals,
  ...nextTs,
  // 以下を追加
  stylistic.configs.customize({
    indent: 4,
    quotes: 'double',
    semi: true,
  }),


より詳しい情報は以下を参照ください。
https://eslint.style/guide/config-presets