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.