Next.js and React Project Configuration: ESLint, Prettier, and Git Hooks

In this tutorial, I share an opinionated set of configurations for ESLint, pre-commit hooks, and styling and indentation configuration.

Next.js and React Project Configuration / Photo by Sigmund on Unsplash

Next.js Project Setup

I have a Next.js project that I set up with TypeScript and ESLint.

npx create-next-app@latest --typescript

The npx create-next-app@latest --typescript command specifically sets up a new Next.js project with TypeScript. The --typescript flag tells the command to use TypeScript instead of JavaScript for the project. This is a great choice if you want to add static typing and other features to your Next.js project, making it easier to maintain and debug in the long run.

When you run the command, npx downloads the latest version of the create-next-app package and uses it to scaffold a new Next.js project in your current directory.

Overall, the npx create-next-app@latest — typescript command is a quick and easy way to create a new Next.js project with TypeScript, allowing you to start building your app immediately. But if you want to customize your project setup, you can also create a new Next.js project from scratch. Check out the Next.js documentation for more information on how to do this.

ESLint Configuration

ESLint is a powerful tool that can help ensure your code is consistent, readable, and error-free. If you’re working on a Next.js and React project written in TypeScript, it’s important to have a solid ESLint configuration to catch common mistakes and enforce good coding practices.

The following is the ESLint configuration for Next.js and React projects with TypeScript that I use:

{
  "plugins": [
    "react",
    "react-hooks",
    "prettier",
    "@typescript-eslint"
  ],
  "extends": [
    "eslint:recommended",
    "next",
    "next/core-web-vitals",
    "prettier"
  ],
  "rules": {
    "indent": ["error", 2],
    "quotes": ["error", "double"],
    "semi": ["error", "always"]
  }
}

This configuration includes plugins for React, React hooks, Prettier, and TypeScript and extends several recommended configurations for ESLint and Next.js. It also sets custom rules…