Next.jsでTypescriptを使いたい
この記事は最終更新日から1年以上が経過しています。
![](https://firebasestorage.googleapis.com/v0/b/webdevelopers-1886f.appspot.com/o/images%2F%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202021-05-01%2017.52.02.png?alt=media&token=b91d4053-7636-418d-8b36-e1b6257b71b3)
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
ローカルサーバー起動時に下記のメッセージが出ていました!
![](https://firebasestorage.googleapis.com/v0/b/webdevelopers-1886f.appspot.com/o/images%2F%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202021-05-01%2018.01.51.png?alt=media&token=14a27df2-f2b7-473d-a83b-c437e7a11a36)
ファイルも作られていました!
![](https://firebasestorage.googleapis.com/v0/b/webdevelopers-1886f.appspot.com/o/images%2F%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202021-05-01%2018.02.50.png?alt=media&token=e9870eb6-0dec-4a36-acb9-b810d51406f6)
一旦ローカルサーバーを止め、Next.jsアプリの「pages」ディレクトリ内のファイルの拡張子を「.js」から「.ts」に変更します。
![](https://firebasestorage.googleapis.com/v0/b/webdevelopers-1886f.appspot.com/o/images%2F%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202021-05-01%2018.04.16.png?alt=media&token=2b24686b-f5e2-4333-8d08-5cd64546dbea)
では、ローカルサーバーを再起動します。
$ npm run dev
ローカルサーバーが起動すると下記の初期画面が出ました。
![](https://firebasestorage.googleapis.com/v0/b/webdevelopers-1886f.appspot.com/o/images%2F%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202021-05-01%2018.09.06.png?alt=media&token=e889873a-0029-413f-b927-11d18d5ca371)
はい、これで完了です!
ありがとうございました。