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

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

Learn how to set up a Next.js project with TypeScript, Prettier, and Husky to improve your development workflow and code quality.

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.

Conclusion
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.

Did you find this article valuable?

Support ByteScrum Technologies by becoming a sponsor. Any amount is appreciated!