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 :)
Top comments (0)