Next.js + ESLint

On the fly ESLint for Next.js project

Installation

npm install --save next-eslint

or

yarn add next-eslint

Usage

We will use xo for this example but you can choose any configuration out there.

Setup

npm install --save-dev eslint-config-xo

or

yarn add --dev eslint-config-xo

Configuration

ESLint

Add some ESLint config to your package.json

{
  "name": "my-awesome-project",
  "eslintConfig": {
    "extends": "xo"
  }
}

Or use .eslintrc

{
  "extends": "xo"
}

Next.JS

Create a next.config.js in your project

// next.config.js
const withESLint = require('next-eslint')
module.exports = withESLint()

Try it

Create a page file pages/index.js

import logo from "../logo.svg"

export default () => <div><img src={logo} /><br />Hello World!</div>

With options

You can also pass a list of options to the eslint-loader by passing an object called eslintLoaderOptions.

For instance, to process and report errors only and ignore warnings, you can write:

// next.config.js
const withESLint = require('next-eslint')
module.exports = withESLint({
  eslintLoaderOptions: {
    quiet: true
  }
})

For a list of supported options, refer to the webpack eslint-loader README.

Configuring Next.js

Optionally you can add your custom Next.js configuration as parameter

// next.config.js
const withESLint = require('next-eslint')
module.exports = withESLint({
  webpack(config, options) {
    return config
  }
})