Setup Next.js 14 project with Eslint + Prettier + Tailwind CSS

To set up a Next.js 13 project with ESLint and Prettier, you can follow these steps:

Step 1: Create a Next.js Project

npx create-next-app my-nextjs-app

Replace my-nextjs-app with the name of your project.

Step 2: Install ESLint and Prettier

Navigate to your project directory and install ESLint, Prettier, and required plugins:

cd my-nextjs-app
npm install --save-dev eslint prettier eslint-plugin-react eslint-config-prettier eslint-plugin-prettier prettier-plugin-tailwindcss

Step 3: Create ESLint Configuration

Create an ESLint configuration file named .eslintrc.js in your project root:

module.exports = {
  extends: ['next', 'next/core-web-vitals', 'eslint:recommended', 'plugin:react/recommended', 'plugin:@typescript-eslint/recommended', 'prettier'],
  plugins: ['react', '@typescript-eslint'],
  parserOptions: {
    ecmaVersion: 2021,
    sourceType: 'module',
  },
  rules: {
    // Add your custom ESLint rules here
  },
};

Step 4: Create Prettier Configuration

Create a Prettier configuration file named .prettierrc.js in your project root:

module.exports = {
  semi: true,
  trailingComma: 'all',
  singleQuote: true,
  printWidth: 100,
  tabWidth: 2,
  plugins: ["prettier-plugin-tailwindcss"],
};

Step 5: Configure VSCode (Optional)

If you're using Visual Studio Code, you can install the ESLint and Prettier extensions for automatic linting and formatting.

Step 6: Add Scripts to package.json

Add the following scripts to your package.json file:

"scripts": {
  "lint": "eslint .",
  "format": "prettier --write ."
}

Step 7: Run ESLint and Prettier

npm run lint     # Run ESLint
npm run format   # Format code with Prettier

Comments

[Lumin]

You have to use eslint@^8 since eslint@9 might have breaking changes.

[Wladimir Rocha]

There is already a command inside that helps you with migration