Configure ESLint, Prettier and path aliases with Next.js
Published: 2022-01-11 15:37:56

---
title: Configure ESLint, Prettier and path aliases with Next.js
published: true
description: This is a quick guide for you to start your Next.js project, with `ESLint`, `Prettier` and path aliases configured the right way!
---

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:

```bash
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.

```json
{
  "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.

```json
{
  "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

```jsx
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 :)