Next.jsでローカルビルド(npm run dev)時にeslintを実行する方法

環境

• windows10
• macOS Monterey 12.0.1
• node 18.13.0
• npm 8.19.3
• React 18.2.0
• Next.js 13.1.6
• VsCode

公式・その他技術ブログ等にほとんど情報がなかったので、残しておく

やりたいこと

ローカル開発時(npm run dev)に、eslintを実行したいが、そのためにこれまでしようされてきたeslint-loaderは2020年9月にDEPRECATEDとなっているため、eslint-webpack-pluginを使用する。

きちんと設定できていれば、下図のようにブラウザ・コンソール上にエラーが表示される

5:3 error Unexpected console statement no-console
 1 problem (1 error, 0 warnings)

設定手順

npm install eslint-webpack-plugin

ただ、これをnext.config.jsに適用するための情報がなく、いろいろ探し回った結果以下のように設定すればいいことが判明

公式Docのこの記載を少し応用する

next.config.js

const EslintWebpackPlugin = require('eslint-webpack-plugin')

/** @type {import('next').NextConfig} */

module.exports = {
  reactStrictMode: true,
  webpack(config) {
    config.plugins.push(
      new EslintWebpackPlugin({
        extensions: ['ts', 'tsx'],
        exclude: 'node_modules',
      })
    )
  return config
  },
}

まとめ

いかがでしたでしょうか。本記事では、Next.jsでローカルビルド(npm run dev)時にeslintを実行する方法について紹介しました。公式ドキュメントに設定方法の記載がなく少しつまづいたので参考になれば幸いです。