Next.js集成TypeScript后编译遇错误不终止的问题求助

Hey there! I totally get where you’re coming from—having TypeScript errors only show up in your IDE but not stopping the dev server can be super frustrating, especially when you want to catch issues early. Let’s fix this right away.

The Root Cause #

By default, Next.js’s next dev command doesn’t treat TypeScript type errors as fatal. Even with strict: true in your tsconfig.json, the dev server will still spin up because Next separates the build process from type checking for faster development. But we can change that behavior.

Solution 1: Use Next.js’s Built-in Environment Variable (Recommended) #

If you’re using Next.js 12 or newer, there’s an official environment variable that makes TypeScript errors stop the dev server dead in its tracks.

Just update your package.json scripts to include NEXT_TSC_ERRORS_AS_ERRORS=true before the next dev command:

{
  "scripts": {
    "dev": "NEXT_TSC_ERRORS_AS_ERRORS=true next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  }
}

Now when you run npm run dev, if there are any TypeScript errors (like your const st:string =3; example), the server will refuse to start and print all errors in your terminal. Perfect for catching mistakes before you even start testing!

Solution 2: Manual Type Check for Older Next.js Versions #

If you’re stuck on an older version of Next.js (pre-12), you can add a pre-check using tsc before starting the dev server.

1. Update your package.json scripts to run tsc --noEmit first—this runs TypeScript’s type checker without generating any output files:

{
  "scripts": {
    "dev": "tsc --noEmit && next dev",
    "build": "tsc --noEmit && next build",
    "start": "next start"
  }
}

Now npm run dev will only start the server if tsc doesn’t find any type errors.

Bonus: Add Live Type Checking #

The above method only checks types once when you run npm run dev. If you want real-time checks as you edit files, use concurrently to run both tsc --watch and next dev in parallel:

1. Install concurrently as a dev dependency:

npm install --save-dev concurrently

2. Update your scripts:

{
  "scripts": {
    "dev": "concurrently \"tsc --noEmit --watch\" \"next dev\"",
    "build": "tsc --noEmit && next build"
  }
}

Now every time you save a file, tsc will re-check types and print errors in your terminal immediately.

Quick Note on Your tsconfig.json #

Your current tsconfig.json looks great—strict: true is enabled, which ensures the strictest type checking. You don’t need to modify any settings here for the solutions above to work.

内容的提问来源于stack exchange，提问作者Ali Ehyaie