Do you use Next.js? then make sure you use these tools to boost your productivity and development experience!

Typescript

Typescript is a very popular and good choice for using with Next.js or any other framework ! It is going to reduce the amount of errors we get by introducing a type system with JavaScript

To Create a Next.js project with typescript , run:

npx create-next-app next-typescript-app --ts

This will create a next.js project with typescript support and also a tsconfig.json file (the typescript configuration file)

Sass

Sass is an awesome superset for css which supports a lot of features like nesting , if conditions and more. You can learn more about sass here

It is very simple to add sass to your project if you use next.js. Just add sass with

yarn add sass
# or
npm i sass

Then rename your .css files with .scss of .sass extensions. If you use the .sass extension, when you will have to remove the curly braces and the semicolons. Or you can use the .scss extension. You can also rename the css module files with the .sass or the .scss extension

Prettier

Does your code not get formatted the way you want? use Prettier! prettier is a code formatter which is also very popular you can learn more about prettier here

To add prettier to your project, run:

yarn add prettier -D
# or
npm i prettier -D

I also create a npm script in my package.json to format my code. ( I named it clean)

  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "clean": "prettier --write ."
  }

So now when you run npm run clean of yarn clean you will see that your code gets clean. I also create a .prettierrc file in the root of my project and give the following in it:

{
  "singleQuote": true
}

But if you look carefully, then you will find you that it also format the files in our .next folder created by next.js, so to ignore the files in the .next folder, create a .prettierignore file at the root of your project with the following contents

# next.js dev server files
.next/
# npm packages
node_modules/

Using husky to format code

🐶

I did not find a logo for husky 🤷‍♂️

If you use git, this will be super useful! you can create a git hook, which will format our code before each commit.

Since we have prettier already installed, run:

npx mrm@2 lint-staged

We are also using husky in here. so it will create a .husky folder

And in our package.json, in the lint-staged section, change to the following if using typescript

  "lint-staged": {
    "*.ts": "eslint --cache --fix",
    "*.{tsx,.ts,css,md}": "prettier --write"
  }

Now, I did a quick commit with

git commit -m '🦋 Formatting with Prettier'

and..... Our code is pretty as we specified in our .prettierrc file

Testing 🧪

If you want to test your next.js application, use cypress as shown in the next.js docs

Install cypress by running:

yarn add cypress -D
# or
npm i -D cypress

Create a cypress script

"test": "cypress open"

Run cypress with

yarn test
# or
npm run test

You can create your tests now ( I am not showing anything now). You can learn more here

That was it! You can of course add on to this list... Thanks for reading 😁

👋👋