Add Prettier to NextJS

Out of the box NextJS comes with eslint, but this only helps with code quality and does not enforce any kind of formatting. You can heavily enhance this default config by combining it with Prettier for consistent formatting across your projects and team.

Dependencies

yarn add --dev prettier eslint-config-prettier eslint-plugin-prettier

Files

.eslintrc.json

{
  "root": true,
  "extends": [
    "next/core-web-vitals",
    "plugin:prettier/recommended"
  ]
}

.prettierrc.json

{
  "jsxSingleQuote": true,
  "semi": false,
  "singleQuote": true,
  "trailingComma": "all"
}

IDE

You do not need Prettier extension installed. If you use it for other projects then you can disable it for the current workspace.

Instead, Prettier is executed as part of eslint so the eslint-plugin-prettier plugin is recommended for use with vscode (or other Editor).

I always had to reload the vscode window to get the new eslint config to detect properly on auto save.