Configure ESLint, Prettier and path aliases with Next.js

If you don't like seeing ../../../../component/example.jsx on your codebase, you're not alone.

This is a quick guide for you to start your Next.js project, with ESLint, Prettier and path aliases configured the right way! :)

The easiest and quickest way to get started with Next.js is by using create-next-app. This CLI tool developed by the Next.js team enables you to quickly start building a new Next.js application, with everything set up for you.

You can start with:

npx create-next-app@latest
# or
yarn create next-app

create-next-app will give you already eslint and eslint-config-next, but we need some additional packages to install. If you don't have these on your project, you will need to install them.

Configuration and packages to install

• eslint-import-resolver-alias
• eslint-config-prettier
• prettier

Configure ESLint and path aliases

We're going to configure ESLint to allow us to have path aliases and warnings on our code editor when the path is wrong.

prettier will help us as a code formatter and I honestly recommend everyone use it!

Create and configure .eslint.json

We need to tell eslint which plugins we want to use and which settings we want to configure for each plugin.

In this case, we're extending eslint with the prettier and import-resolver-alias libraries and also telling import/resolver that for .js and .jsx extensions, we will map @ to . root folder.

By doing this, eslint will not warn us when using e.g: @/src/component/example.jsx.

Note: the order of the extends list matters.

{
  "extends": [
    "plugin:import/errors",
    "prettier",
    "next"
  ],
  "settings": {
    "import/resolver": {
      "alias": {
        "extensions": [".js", ".jsx"],
        "map": [
          ["@", "."]
        ]
      }
    }
  }
}

Create jsconfig.json

Let's add the alias we need, shall we? Here is where we're actually defining which aliases we want.

{
  "compilerOptions": {
    "module": "commonJS",
    "target": "es2017",
    "jsx": "react",
    "baseUrl": ".",
    "paths": {
      "@/*": ["./*"]
    }
  }
}

This is an example, but you can add whatever you like. Left side of the tuple is your alias, on the right side is where the alias should map to. In this case, @ resolves to the root folder .

Create next.config.js for webpack

const path = require("path");

module.exports = {
  webpack: (config) => {
    config.plugins = config.plugins || [];

    config.optimization.providedExports = true;

    config.resolve.alias = {
      ...config.resolve.alias,
      "@": path.resolve(__dirname, "./"),
    };

    return config;
  },
};

This is for the production build. Since nextJS uses webpack to build everything for production, we need to configure the resolver and tell webpack how to read our imports.

Hope this is useful, if you follow all steps you will get a working project with ESLint, Prettier and path aliases :)

Comments

[Andreas]

How would you do this with eslint v9 + flat config?