How to Set Up a Next.js Project with TypeScript, Prettier, and Husky

Next.js, a robust framework for React, streamlines the development of web applications. By integrating TypeScript for strong typing, Prettier for uniform code formatting, and Husky for automated linting, the development process not only becomes more efficient but also significantly more enjoyable. This blog post will guide you through setting up a Next.js project with these tools to enhance code quality and streamline your development workflow.

Prerequisites

Before we begin, make sure you have Node.js and npm installed on your machine. You'll also need a basic understanding of React and Next.js.

Step 1: Create a New Next.js Project

First, let's create a new Next.js project using the TypeScript template. Open your terminal and run the following command:

npx create-next-app@latest my-nextjs-app --ts

This command creates a new Next.js project with TypeScript support in a directory named my-nextjs-app.

Navigate into your project directory:

cd my-nextjs-app

Step 2: Install Prettier

Prettier is a code formatter that helps maintain consistent code style across your project. Install it along with its plugin for Next.js and React:

npm install --save-dev prettier eslint-config-prettier

Create a .prettierrc file in the root of your project and add the following configuration:

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

Step 3: Configure ESLint with Prettier

ESLint is a tool for identifying and reporting on patterns found in ECMAScript/JavaScript code. Install ESLint and its necessary plugins:

npm install --save-dev eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-react eslint-plugin-react-hooks

Create an .eslintrc.json file in the root of your project and configure ESLint to use the Prettier plugin:

{
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:react/recommended",
    "plugin:react-hooks/recommended",
    "prettier"
  ],
  "plugins": ["@typescript-eslint", "react", "react-hooks"],
  "rules": {
    "react/prop-types": "off",
    "@typescript-eslint/explicit-module-boundary-types": "off"
  },
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": 2020,
    "sourceType": "module"
  },
  "settings": {
    "react": {
      "version": "detect"
    }
  }
}

Step 4: Configure Husky for Git Hooks

Husky is a tool that allows you to easily add Git hooks to your project. Install Husky and lint-staged:

npm install --save-dev husky lint-staged

Update your package.json file to add the following configuration for Husky and lint-staged:

"husky": {
  "hooks": {
    "pre-commit": "lint-staged"
  }
},
"lint-staged": {
  "*.{js,jsx,ts,tsx}": [
    "eslint --fix",
    "prettier --write"
  ]
}

Step 5: Test Your Setup

You can now test your setup by creating a simple component in your project and running the following command to see if Prettier and ESLint automatically format your code:

npm run lint

If everything is set up correctly, Prettier and ESLint should format your code according to the rules specified in your configuration files.