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

[Next.js](https://www.bytescrum.com/), 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](https://www.bytescrum.com/contact-us/) 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:

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

This command creates a new [Next.js](https://spacejelly.dev/posts/how-to-automate-code-linting-in-next-js-with-eslint-husky-git-hooks) project with TypeScript support in a directory named `my-nextjs-app`.

Navigate into your project directory:

```bash
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:

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

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

```bash
{
  "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:

```bash
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:

```bash
{
  "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**

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

```bash
npm install --save-dev husky lint-staged
```

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

```bash
"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:

```bash
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.

<details data-node-type="hn-details-summary"><summary>Conclusion</summary><div data-type="detailsContent">In this blog post, we've explored how to enhance a Next.js project by integrating TypeScript, Prettier, and Husky. This trifecta not only elevates the quality of your code through strong typing and consistent formatting but also ensures that your development workflow is more efficient and error-free. By following the steps outlined, developers can leverage these powerful tools to maintain high standards in their coding practices, leading to more reliable and maintainable web applications. Embrace these practices to make your development process smoother and more enjoyable.</div></details>