Search for a command to run...
Learn how to set up a Next.js project with TypeScript, Prettier, and Husky to improve your development workflow and code quality.
Our company comprises seasoned professionals, each an expert in their field. Customer satisfaction is our top priority, exceeding clients' needs. We ensure competitive pricing and quality in web and mobile development without compromise.
Thanks for sharing
A modern community for developers to learn, share, and grow together.
Discover the most practical AI tools that save time, boost productivity, and actually work.
Unlock Productivity, Creativity, and Growth Using These Free AI Tools in 2025
"A Developer’s Guide to the Best Payment Processors for Modern Web Apps"
Protect your privacy, secure your data, and browse with peace of mind.
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.
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.
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
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
}
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"
}
}
}
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"
]
}
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.