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

$ npm i -D eslint eslint-config-next

// 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

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

$ npm run lint

$ npm run format

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

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

$ npm i -D @stylistic/eslint-plugin

// eslint.config.mjs
// 以下を追加
import stylistic from '@stylistic/eslint-plugin'
const eslintConfig = defineConfig([
  ...nextVitals,
  ...nextTs,
  // 以下を追加
  stylistic.configs['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,
  }),