Live Typescript Checking with Next.JS

Question

The only way to check for TypeScript errors with Next.JS is to use npm run build (or yarn build).

If you run npm run dev, it won't show you TypeScript errors, which sucks because it would be nicer to see them in the Terminal window while you're developing.

Is there any way to make npm run dev show TS errors?

FYI - I REALLY don't like using my IDE to work with TS errors. Just my personal preference. I prefer to see them in the terminal window with all the other errors.

Answer 1

You can do something like this if you are using TS4+:

// package.json

{
  "scripts": {
    "dev": "next dev",
    "dev:ts": "yarn dev & yarn ts:watch", // <-- or use concurrently here
                                          // npmjs.com/package/concurrently
    "ts": "tsc --noEmit --incremental",
    "ts:watch": "yarn ts --watch"
  },

  // ...
}

You can also provide custom webpack config like this:

// next.config.js

module.exports = {
  webpack(config, { dev }) {
    if (dev) {
      const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
      config.plugins.push(new ForkTsCheckerWebpackPlugin());
    }
    return config;
  },
};

The feature request is being tracked here.

Answer 2

Unfortunately, as of Next.js v9.4, development typescript checks are disabled since these checks significantly slow the development process. Tim Neutkens states they expect this to happen on the IDE.

And currently, there is no way to re-enable these checks.