Setup a Next.js with app directory, TypeScript, TailwindCSS Project powered by ESLint, Prettier, husky & lint-staged.

Have you been eagerly anticipating the release of Next.js version 13 and all its amazing new features? If so, you’re probably just as excited as I am to get started configuring projects with the new app directory, as well as incorporating cutting-edge technologies like TypeScript and TailwindCSS. And with the addition of essential dev tools like ESLint, Prettier, Husky, and Lint-staged, you can rest assured that your entire team is on the same page when it comes to adhering to code base and rules before committing any changes. It’s time to elevate your development process to the next level!

The very first thing that we need to do is to create a next.js project. The prerequisite is to have Nodejs and a package manager like yarn, npm or pnpm installed in your system.

In this article I will be using yarn. If you want to install yarn, after installing Nodejs, you can install it with the bellow command:

npm install -g yarn

Create a Next.js , Typescript app directory project

Go to your desired directory and open cmd/terminal, then inside the terminal type one of the bellow commands according to what you are using yarn or npm:

yarn create next-app --typescript --experimental-app or npx create-next-app@latest --experimental-app --typescript

while installation it will ask you few questions like the the name of the project, ESlint & src directory usage with the @ alias.

follow the image bellow:

I named the project nextjs-setup with eslint and @ import alias but no src directory as we are using app directory approach.

The next process is to go insite the new nextjs app directory and open it inside your favorite editor; I will be using VSCode.

Installing tailwindCSS

to do that, you can use the embedded terminal of VSCode or any terminal inside the project directory.

The bellow instructions are using yarn & if you are using npm, here you will find the commands : Tailwind installation in a next.js project (npm)

yarn add --dev tailwindcss postcss autoprefixer

Next, initialize the TailwindCSS with the bellow command and it will create two files tailwind.config.js and postcss.config.js in the root of our project:

yarn tailwindcss init -p

Then, open tailwind.config.js file and paste the bellow code inside:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx}",
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}"
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

now lets open the global.css file inside the app directory, delete all its data and paste the bellow code inside it:

@tailwind base;
@tailwind components;
@tailwind utilities;

Inside the app directory, open the page.tsx file, delete its data and paste the following:

export default function Page() {
  return (
    <h1 className="text-3xl font-bold underline">
      Hello world!
    </h1>
  )
}

now its time to run our project to check if the tailwindCSS if its properly configured or not:

yarn dev or npm run dev

then check http://localhost:3000 in your browser and it should show the bellow page for you that ensures the tailwind applies its styles:

Now that we configured all the latest technolgies, lets go for the development work flow tools like eslint, prettier, husky precommit & lint-staged

ESLint

ESLint is a popular open-source tool used for static code analysis in JavaScript projects. It helps developers catch syntax and logic errors, enforce code formatting and styling conventions, and maintain consistency across their codebase.

Next.js is a widely used framework for building server-side rendered React applications. It comes with built-in support for ESLint, making it easy to integrate and enforce coding standards across Next.js projects. There is no need to install or setup anything for eslint its already been install in the first command. Next.js checks the code in build time; later in this article, we will configure it the way that we can check our code with eslint in pre-commit time as well.

Now its time to add prettier in to the play:

Prettier

Prettier can help format the code in a consistent and easy-to-read style, while ESLint can help catch and prevent errors or style violations. To integrate prettier on top of ESLint rules which is configured in a next.js application by default and to not interfere with it; we use a package called: eslint-config-prettier. so, for todays use case we run the following command to install the required dependencies:

yarn add --dev prettier eslint-plugin-prettier eslint-config-prettier

For prettier in order to work properly with eslint you need to add “prettier” in the extends and the plugins array inside .eslintrc.json file. ( add the bellow code in your .eslintrc.json file).

{
  "extends": ["next", "next/core-web-vitals", "prettier"],
  "plugins": ["prettier"],
  "rules": {
    "no-console": "warn",
    "no-use-before-define": "error",
    "no-unused-vars": "error"
  }
}

Create a new file in the root or our directory .prettierrc and add a custom Prettier configuration:

{
  "arrowParens": "always",
  "bracketSameLine": false,
  "bracketSpacing": true,
  "embeddedLanguageFormatting": "auto",
  "htmlWhitespaceSensitivity": "css",
  "insertPragma": false,
  "jsxSingleQuote": true,
  "printWidth": 80,
  "proseWrap": "preserve",
  "quoteProps": "as-needed",
  "requirePragma": false,
  "semi": true,
  "singleQuote": false,
  "tabWidth": 2,
  "trailingComma": "es5",
  "useTabs": false,
  "vueIndentScriptAndStyle": false
}

Also we can create .prettierignore to ignore applying the prettier configurations. check the example bellow:

.next
.cache
package-lock.json
public
node_modules
next-env.d.ts
next.config.ts
yarn.lock

Now if you want to check that eslint & prettier works fine or not, you first need to add prettier as code formatter in your code editor(VSCode);then, set it to enforce its edits on save. After that, while you bring some changes in a file which doesn’t match the prettier and ESlint rules; if its possible for prettier it will automatically fix it on the file save. (ctrl+s or autosave) .

ESlint: for the eslint to check if it catches the errors or not, you can run the command yarn lint and it will run linting. Incase there was any linting error it throws error in the console.

Now its time to check the above eslint & prettier rules and fix the file if possible before each commit and only run the commands on the file changed.

Husky

Husky is a utility package (hook) that runs the above linting & prettier commands while committing your changes.

To install it run the bellow command:

yarn add --dev husky

then run the bellow command in order to initialize the husky, husky will create a folder called .husky in the root of our project with some files and folders inside it.

yarn husky install

Lint-staged

Lint-staged is also a utility package which only runs the linting & prettier commands to those files which are changed not all the project files.

To add this use the bellow command:

yarn add --dev lint-staged

then create a file called: .lintstagedrc.js in the root of the project and paste the bellow commands inside it to run when committing and check only the JavaScript/ Typescript files or components and fix them if possible.

module.exports = {
  // Run type-check on changes to TypeScript files
  "**/*.ts?(x)": () => "yarn type-check",
  // Lint & Prettify TS and JS files
  "**/*.(ts|tsx|js)": (filenames) => [
    `yarn lint . ${filenames.join(" ")}`,
    `yarn prettier --write ${filenames.join(" ")}`,
  ],
};

Now for both to work together we need to create a file called: pre-commit inside .husky folder and then paste the bellow code inside it to run the lint-staged file on each commit to happen.

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

# Add the following
yarn lint-staged

# If using npm, remove above and uncomment below
# npm run lint-staged

last but not least, add this command in your package.json file; script section:

 "scripts": {
   ..., 
    "type-check": "tsc --project tsconfig.json --pretty --noEmit",
}

Now if you want to commit your changes, you will see something like the bellow image in your terminal which shows that your staged files gets checked to match the eslint & prettier rules and if its not successful, it will show you the error and prevent you from committing.

Alright now that we successfully setup a Next.js project with amazing technologies like Typescript and TailwindCSS along side with the development tools like eslint, prettier, husky and lint-staged go ahead an take a coffee or tea to fresh up.

if you couldn’t get along with the above guide, you can check the starter project I created with the same flow for your mistakes and even use it for your own. Don’t forget to give it a star ⭐.

👉 Github Starter 👈

Also if you want to be updated with the tools, insights and my everyday learning join my daily.dev squad: JS Dojo!

🙏 Thanks for reading, if you liked it give it a clap in here and share it with your friends in your own community!