Next.jsでTypescriptを使いたい

Next.jsでTypescriptを使用したかったのでメモしました。

こちらの公式に参考に進めました。

まずは、Next.jsアプリを作成します。

npx create-next-app アプリの名前 --use-npm

アプリを作ったら、tsconfig.jsonを作成します

プロジェクトのルートに空のtsconfig.jsonファイルを作成しましょう。

$ cd アプリの名前
$ touch tsconfig.json

そして、TypeScriptをインストールします。

$ npm install --save-dev typescript @types/react @types/node

ここで一旦、ローカルサーバーを起動します。 するとNext.jsが、tsconfig.jsonファイルにデータを入力し、next-env.d.tsファイルを作成します。

$ npm run dev

ローカルサーバー起動時に下記のメッセージが出ていました！

ファイルも作られていました！

一旦ローカルサーバーを止め、Next.jsアプリの「pages」ディレクトリ内のファイルの拡張子を「.js」から「.ts」に変更します。

では、ローカルサーバーを再起動します。

$ npm run dev

ローカルサーバーが起動すると下記の初期画面が出ました。

はい、これで完了です！

ありがとうございました。