Part 01: Configure ESLint and Prettier into Next.js projects

Next.js is an open-source React framework used to develop full-stack web applications. It contains advanced features like Server-Side Rendering (SSR), Static Site Generation (SSG), file-system-based routing, SEO friendliness, and much more which help to develop high-performing, modern web applications. We can use front-end capabilities in Next.js as a reliable solution for simple to large-scale front-end projects. For back-end projects, we still can use Next.js back-end features but we may need to use an additional back-end considering the relevant project requirements.

This is the first article of the “Recommended Next.js Libraries & Packages” article series. Here I explain how to configure ESLint and Prettier in Next.js. I have provided the relevant codes for each step to do it yourself and get a better understanding. After the end of the series, you can use the complete project as a starter kit for Next.js projects as well.

GitHub repository link related to the article series:

miyushan/nextjs-dev-kit (github.com)

Note: Refer to the commit messages to track changes that happened in each step

System Requirements:

Node.js 18.17 or later

Let’s get started...!

1. Next.js

1.1. Install Next.js

Execute the below command in your CLI to install Next.js

npx create-next-app@latest

Then it will ask some questions with prompted answers. You can simply select them using the keyboard arrow keys. You can find the preferred selections from the below image.

Selections to initialize the Next.js project

Reasons for the selections:

• Typescript: Typescript helps to maintain a type-safe codebase with better code autocompletion.
• ESLint: This helps to follow best coding practices and keep the codebase consistent.
• TailwindCSS: A utility-first CSS framework, use to develop responsive and maintainable designs faster.
• src/ directory: This helps to organize the codebase cleanly by maintaining a separation between project source code and other files (configurations, env, build files, etc.)
• App Router: App Router is the recommended routing mechanism for the latest Next.js projects. It has more benefits than the Pages Router which was used in early versions.
• Import Alias: This helps to use shorter descriptive import paths.

1.2. Start the project

Run this command in the CLI to start the project

npm run dev

You can see below kind of prompt message if you have successfully installed Next.js. After that, you can go to the highlighted link to view your project.

Prompts after calling the npm run dev command

View after accessing the highlighted link

Current view for Next.js ‘/’ route

2. ESLint

ESLint is a powerful tool that is used to maintain a consistent codebase. With this, we can define rules to follow throughout a specific project. Next.js has an integrated ESLint support. So, we don’t need to add it manually. In this project, I continue with integrated ESLint support.

3. Add Prettier

Prettier is a package we use to maintain a consistent code style in our codebase. When multiple developers collaboratively develop an application, they use different code styles and their IDE setup may be different. It may lead to an inconsistent codebase. Prettier is useful to get rid of that. With this, we can improve the efficiency of the code-reviewing process as well.

In future articles, I hope to implement prettier with task automation tools and improve the developer experience.

3.1. Install required packages

npm install --save-dev --save-exact prettier eslint-config-prettier prettier-plugin-tailwindcss

3.2. Update scripts object inside “package.json”

New prettier scripts are useful to ensure our formatting and automatically format the codebase according to prettier rules.

"scripts": {
  "dev": "next dev",
  "build": "next build",
  "start": "next start",
  "lint": "next lint",
  "format": "prettier --check .", //check the formatting of files without making changes
  "format:fix": "prettier --write --list-different ." //format the files and write the changes
},

3.3. Create “.prettierrc.json” file in the root level

We can define our styling ruleset in this file. You can change this as you need.

{
  "singleQuote": true,
  "trailingComma": "all",
  "semi": true,
  "bracketSpacing": true,
  "tabWidth": 2,
  "plugins": ["prettier-plugin-tailwindcss"]
}

3.4. Update “.eslintrc.json” file

This step is required to avoid conflicts between prettier rules with ESLint rules.

{
  "extends": ["next/core-web-vitals", "prettier"]
}