How to setup Next.js project with TypeScript, ESLint and Prettier

Introduction

Have you ever struggled what packages should be installed to set up a project? Should I install eslint-config-airbnb or eslint-config-airbnb-base? What is eslint-plugin-jsx-a11y? Is it still needed to install eslint-plugin-react and eslint-plugin-react-hooks?

When I start doing research, I have seen people installed a pile of packages. I always question do I really need them all.

It's good to have a cheat sheet to follow so that every time we can create a clean new project with all toolkits ready. Here is mine for a Next.js project.

The VS Code Config part is based on this post How to get ESlint and Prettier to play nice in VS Code? From which a new setting of codeActionsOnSave is introduced.

Toolkits:

Typescript
ESLint
Prettier
Editor Ruler (80,100,120, color: hotpink)

Pre-requisite

VS Code
VS Code plugin: ESLint, Prettier, Format Code Action

VS Code Config

Cmd + Shift + P to open Command Palette
Type setting
Select Preferences: Open Settings (JSON)
Add below config:

{
  "editor.rulers": [80, 100, 120],
  "workbench.colorCustomizations": {
    "editorRuler.foreground": "#FF69B4"
  },
  "editor.formatOnSave": false,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.formatDocument": true,
    "source.fixAll.eslint": true
  }
}

Create new project

Next.js - TypeScript
Run below command:

npx create-next-app@latest --ts <MY_APP_NAME>

With the flag --ts, Typescript related packages like @types/node and @types/react would be included. File extension would become .tsx instead of .jsx. A file tsconfig.json which is used by Typescript compiler would be prepared and with a list of default setting like "target": "es5" and "strict": true.

Setting up ESLint

Since version 11.0.0, Next.js already integrated ESLint. We neither have to install ESLint package nor create .eslintrc.json file manually.

eslint-config-next could be found in package.json which below 3 recommended rule-set are used.

eslint-plugin-react
eslint-plugin-react-hooks
eslint-plugin-next

You can check eslint-config-next for more details (It's even included @typescript-eslint/parser and jsx-a11y).

Note: jsx-a11y is a static AST checker for accessibility rules on JSX elements. npm web site shows its supported rules.

So, I am happy with the built-in parser and rule-sets but it lacks the airbnb style. According to Next.js, it is not recommended to install overlapping ESLint plugin

This eliminates the risk of collisions or errors that can occur due to importing the same plugin or parser across multiple configurations.

So I only install eslint-config-airbnb-base additionally then should be good to go.

npm i -D eslint-config-airbnb-base

Add airbnb-base to .eslintrc.json

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

Note: eslint-config-airbnb is a collection of a bunch of plugins including eslint-plugin-import, eslint-plugin-react, eslint-plugin-react-hooks, and eslint-plugin-jsx-a11y while eslint-config-airbnb-base is only the core part of airbnb style.

If you want to customise the rules, set the rule to warn or off manually in .eslintrc.json.

{
  "extends": ["next/core-web-vitals", "airbnb-base"],
  "rules": {
    "no-unused-vars": "warn"
  }
}

Setting up Prettier

Now VS Code will alert you with the error underline. We want Prettier to help format our code nicely.

So we create a new file .prettierrc. And add below:

{
  "singleQuote": true
}

Should I specify parser in Prettier?
From Prettier:

Prettier automatically infers the parser from the input file path, so you shouldn’t have to change this setting.

Side Dish
Prettier has not yet format long string. There is a discussion on break strings in Prettier community

Conclusion

I hope you have got some basic ideas what packages we already have by default and minimised the amount of packages to be installed for basic setup. Now I have a clean project with all the toolkits I need and without packages that might cause collision.

After all, you should only install those as devDependencies and won't affect the size of production build (For Typescript, I am not sure. Official doc recommends to install globally, but someone in this discussion said global install would be an anti-pattern. What do you think? Do you install typescript globally or locally, and why? Please let me know).

Things to think about

As Prettier formats your code on save, some files like _app.tsx won't be formatted unless you open it and save it once. You can run the command npm run lint to lint whole project so that no file would be left unformatted. I wonder if there is any tools could help auto formatting after lint.
When learning typescript, there comes a term tsc means typescript compiler. I am not sure when to use it or do I need to use it manually cos I have built some typescript projects and never use it once.

Photo by SHVETS production from Pexels

Blog