I enjoy automation!

There’s something so satisfying about taking repetitive tasks and making them easier with just a little bit of code.

The need for this script

In a fast-paced development environment, it’s easy to forget certain default configurations you need when starting a new project. I develop projects in Next.js and prefer having ESLint and Prettier help me write and format my code. However, it is easy to forget or mess up the setup of these tools in your application.

In this post, I want to share a neat script I created to streamline the process of configuring a new Next.js project with some of my favorite defaults for Prettier, ESLint and Tailwind CSS support. The idea here is to save time and elimiate the need to reconfigure every new project I start.

What goes into creating and running the script

First, I create the project using:

pnpm create next-app

Then I go into that directory:

cd <project-name>

Here, I run the command that invokes the following script. You can paste the contents of this script into a file, say, bootstrap.sh and run it using:

chmod +x ./bootstrap.sh
./bootstrap.sh

Here is what you need to paste in the bootstrap.sh file:

#!/bin/bash

pnpm install -D prettier prettier-plugin-tailwindcss

echo '{
  "plugins": ["prettier-plugin-tailwindcss"]
}' >.prettierrc

pnpm install -D eslint-config-prettier eslint-plugin-prettier

echo '{
  "extends": [
    "next/core-web-vitals",
    "eslint:recommended",
    "plugin:react-hooks/recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:react/jsx-runtime",
    "plugin:prettier/recommended",
    "plugin:jsx-a11y/strict"
  ],
  "plugins": ["react", "react-hooks", "@typescript-eslint"]
}' >.eslintrc.json

How the script works

It is pretty straightforward to understand the components of this script.

1. First, we install the packages related to Prettier

2. Then, we create a file .prettierrc and fill it with our custom settings and preferences

3. After that, we install some more packages related to ESLint and Prettier (these are required for ESLint and Prettier to work together without conflicting each other)

4. Finally, we edit the .eslintrc.json file where we add our custom configurations

Why Use this script?

1. Consistency — By automating the setup, you ensure that all the projects you create follow the same configuration. This is helpful if you like to work in a certain way with your tools and just want your new project to work the way you like out of the box.

2. Time-saving — Instead of manually running these commands (and having to look up the long names of these packages after having forgotten them for the 4915th time), this script lets you get started with a fully configured Next.js project in just a few seconds.

3. Less Decision Fatigue — The configuration you set up is something you like. So the next time, you won’t have to worry about choosing between different packages to do the same thing; the choice was already made by you when you ran the script for the first time.

Extending the script

While this script is a great starting point, of course this is customizable. You can add more tools and packages or make other configurations using it. For example, you can add axios to the list of packages to download if you prefer it over the in-built fetch function of JavaScript.

Conclusion

Automating your Next.js setup with this script can save you a lot of time and frustration, especially if you frequently create new projects. By pre-configuring things like ESLint and Prettier, you can get right into the code without any hassle.

I hope this article has sparked some ideas for your own workflows. Don’t hesitate to customize and extend the script as your needs evolve — that’s one of the best parts about automation!

Happy coding!