DEV Community


Adding a basic pre-commit check to a Next.js app

Hayden Bleasel
I find simple solutions for my own complex problems
・1 min read

When building a Next.js app, it can be a good idea to add some simple checks for Typescript and ESLint when you commit new code. It can help avoid broken Vercel builds and keep your code neat and functional for other contributors.

Now, since version 11.0.0, Next.js provides an integrated ESLint experience out of the box, so we just need to make sure the following script is in our package.json:

"scripts": {
  "lint": "next lint"
Enter fullscreen mode Exit fullscreen mode

If we're using Typescript, we can also do add simple tsc check.

"scripts": {
  "type-check": "tsc"
Enter fullscreen mode Exit fullscreen mode

If we run either of these commands in Terminal, we can audit our codebase. Before we continue, it might be good to fix any issues that appear.

Now, we want to run these checks every time we commit to GitHub, so we don't commit broken or poorly written code. To do this, we'll make use of an NPM module called pre-commit. It works by overriding the existing pre-commit file in your .git/hooks folder.

We can install it with:

yarn add -D pre-commit
# or npm install --save-dev pre-commit if you're nasty
Enter fullscreen mode Exit fullscreen mode

Once that's installed, simply add the following property to your package.json:

"pre-commit": [
Enter fullscreen mode Exit fullscreen mode

This will run the lint and type-check commands every time we commit. If either of these fail, the commit will be blocked.

That's all! If you need to submit crap code that may not work, just commit with git commit --no-verify and you're good to go.

Discussion (0)