Next.jsのプロジェクトにTypeScriptを導入する方法

Next.jsの公式チュートリアルにそって進めます

導入手順

①プロジェクトルートにtsconfig.jsonを追加。

$ touch tsconfig.json

②TypeScriptのパッケージをインストール。

# If you’re using npm
$ npm install --save-dev typescript @types/react @types/node

# If you’re using Yarn
$ yarn add --dev typescript @types/react @types/node

③ローカルの開発サーバの際立ち上げ。ここで、tsconfig.jsonの中身が記述され、next-env.d.tsが追加されます。

$ npm run dev or yarn dev

④JS ファイルを TS ファイルに変換します。

$ find pages -name "_app.js" -or -name "index.js" | sed 'p;s/.js$/.tsx/' | xargs -n2 mv & \
  find pages/api -name "*.js" | sed 'p;s/.js$/.ts/' | xargs -n2 mv

以上です。