More than 1 year has passed since last update.

Next.js 開発時にも型検査を行う

Posted at 2022-03-18

概要

最近 Next.js で開発を進めていて、ビルドを実行した際に発覚したのですが、どうやら Next.js は dev 時に型チェックを行ってくれないようです。そのため開発時には型エラーが起きないけど、ビルド時にエラーが起きてコケてしまうという事が起こり得ます。

そこで今回は開発時に型チェックを行う方法を紹介したいと思います。

package.json に以下を追加

package.json

 "scripts": {
    ...省略
-     "dev": "next dev"
+     "dev": "next dev & tsc --watch --noEmit"
  },

tsc に --noEmit を指定してあげる事で型のチェックだけを行う事が出来ます。
また　--watch　によってファイルの変更を検知する事が出来ます。

Typescript next dev error reporting · Issue #14997 · vercel/next.js
https://github.com/vercel/next.js/issues/14997