[Next.js] ESLint

[Next.js] ESLint

2023-05-31 hit count image

Let's see how to configure ESLint in Next.js.

Blog list

This blog post is a series. If you want to check other blog posts of the series, see the links below.


In this blog post, I will introduce how to configure ESLint in the Next.js project based on TypeScript. ESLint is the compound language of ES(EcmaScript) + Lint(show error code), and supports to find potential errors or bugs by analyzing the source code.

You can see the full source code of this blog post on the link below.

Create Next.js project with TypeScript

To see how to configure and use ESLint in Next.js with TypeScript, execute the following command to create a new Next.js project based on TypeScript.

npx create-next-app --typescript my-app

At this time, you can see the following screen to ask whether to use ESLint or not.

? Would you like to use ESLint with this project? › No / Yes

We will use ESLint, so select Yes to proceed.

Configure ESLint

Next.js basically provides ESLint. We will configure additional settings here. Execute the following command to install the plugins required for additional settings.

npm install --save-dev eslint-plugin-import eslint-plugin-no-null eslint-plugin-storybook @typescript-eslint/eslint-plugin

And then, open the .eslintrc.json file that is the configuration file of ESLint and modify it like the following.

  "extends": ["next/core-web-vitals", "plugin:storybook/recommended"],
  "plugins": ["@typescript-eslint", "no-null"],
  "rules": {
    "@typescript-eslint/no-unused-vars": "error",
    "import/order": [
        "groups": [
          ["parent", "sibling"],
        "pathGroups": [
            "pattern": "react",
            "group": "external",
            "position": "before"
        "pathGroupsExcludedImportTypes": ["react", "next"],
        "newlines-between": "always",
        "alphabetize": {
          "order": "asc",
          "caseInsensitive": true
    "sort-imports": [
        "ignoreCase": true,
        "ignoreDeclarationSort": true,
        "ignoreMemberSort": false,
        "allowSeparatedGroups": true
    "react/react-in-jsx-scope": "off",
    "@typescript-eslint/consistent-type-imports": "error",
    "no-null/no-null": 2,
    "curly": ["error", "multi-line", "consistent"],
    "nonblock-statement-body-position": ["error", "beside"]

Configure scripts

To use ESLint configured above, open the package.json file and add the following scripts.

"scripts": {
  "lint": "next lint",
  "lint:fix": "next lint --fix"

Execute ESLint

Now, execute the following command to check the contents of ESLint configured above.

npm run lint

If there is a file that violates the ESLint option set, it will be displayed as follows.

1:16  Error: Member 'Head' of the import declaration should be sorted alphabetically.  sort-imports

3:1  Error: There should be at least one empty line between import groups  import/order
3:1  Error: `next/font/google` import should occur before import of `next/head`  import/order

Next, execute the following command to fix the violated files.

npm run lint:fix

If all files are fixed, execute the following command again to check again.

npm run lint

If all files are fixed well, you can see the following result.

✔ No ESLint warnings or errors

There are problems that are automatically fixed by ESLint, but there are also problems that are not automatically fixed. In this case, you should open the file and fix it manually.


Done! We’ve seen how to configure and use ESLint in Next.js with TypeScript. ESLint provided by Next.js is enough, but you can additionally configure it like this blog post. I hope you apply ESLint of Next.js to your project to use the unified coding style.

Was my blog helpful? Please leave a comment at the bottom. it will be a great help to me!

App promotion

You can use the applications that are created by this blog writer Deku.
Deku created the applications with Flutter.

If you have interested, please try to download them for free.