NextJS Typescript - Lint and Typecheck

Issue#

On the CI workflow of a Next.js Typescript project that I’m working on, it was only having the linting step

- name: Install dependencies
  run: npm ci

- name: Lint code
  run: npm run lint

However, it was not enough to catch all the errors. The lint workflow was good on the CI workflow, but not with the build phase for the production environment because of typecheck.

Solution#

The solution is to add the typecheck step before the linting step.

• Add the typecheck script into the package.json file

{
  "scripts": {
    "typecheck": "tsc --noEmit"
    // ... other scripts
  }
}

• Add typecheck step to your linting workflow

- name: Install dependencies
  run: npm ci

# Add new step for typecheck
- name: Typecheck
  run: npm run typecheck

- name: Lint code
  run: npm run lint

More details on the Next.js discussion.