NextJs TypeScript setup with Prettier, Husky.

#nextjs #webdev #typescript

Let's get started with the NextJs setup with TypeScript. The configuration will be scalable with added configurations.

Let's create our app first by running the following command:

npx create-next-app@latest

You'll be presented with options. You can select each according to your preferences.

What is your project named? nextJs-awesome-setup
Would you like to use TypeScript with this project? No / Yes
Would you like to use ESLint with this project? No / Yes
Would you like to use Tailwind CSS with this project? No / Yes
Would you like to use `src/` directory with this project? No / Yes
Use App Router (recommended)? No / Yes
Would you like to customise the default import alias? No / Yes

Till now every step was generic which you can also find from here.

Deleting package.lock.json file and node_modules folder.

Then run:

yarn

We have now converted our app to support yarn instead of npm. Which will be quite beneficial in the longer run.

Try running yarn dev to check if everything is working as expected.

yarn dev

Prettier configuration

yarn add -D prettier

This will install the required dependencies

touch .prettierrc

This will create configuration file for Prettier where you can define your own custom rules.
Some common rules:

{
  "semi": true,
  "trailingComma": "none",
  "singleQuote": true,
  "printWidth": 80
}

Paste these rules as is in the .prettierrc file we have just created.

Create .prettierignore to ignore certain files and folders

touch .prettierignore

Add node_modules and .next folders

Add this line in package.json under scripts

"format": "npx prettier --write ."

Now you can finally test if it works, run

yarn format

Hope, it worked.

Husky configuration

Some information about husky

Install husky

npm install husky --save-dev

Enable git hooks

npx husky install

To automatically have Git hooks enabled after install, edit package.json

npm pkg set scripts.prepare="husky install"

After running this you should have this in your package.json

{
  "scripts": {
    "prepare": "husky install" 
  }
}

Create a hook which gets triggered whenever you make a commit

npx husky add .husky/pre-commit "yarn format"
git add .husky/pre-commit

Now whenever you do a new commit, your code should format itself before commit.

Bonus point: You run any script here using && and it will execute whenever you make commit for example your can run test every time before you make commit by adding: