Next.jsをTypescriptで動くようにする

Reactを学習し始め、だんだんと知識を深めてくるにつれて自然とNext.jsを知るようになると思います。 ルーティングやらSSRやら、React単体だとどうも手間がかかる部分を吸収してくれるナイスなライブラリです。 今回はcreate-next-appで作成したプロジェクトをTypescript対応させるまでの手順を紹介します。

前提条件

  • node導入済み
  • next : 9.5.2
  • react : 16.13.1

create-next-appインストール

Next版のcreate-react-appです。

yarn global add create-next-app

プロジェクト作成

任意のディレクトリで下記コマンドを実行します。 プロジェジェクト名はnext-sampleとします。

create-next-app next-sample

作成したらnext-sample直下に移動します。

cd next-sample

tsconfig.jsonの作成

まずtsconfig.jsonを作成します。

touch tscofig.json

@types系のインストール

Typescriptで記載するので@types系のモジュールが必要になります。 下記コマンドでインストールします。

yarn add --dev typescript @types/react @types/node

*.jsファイルをリネーム

今回扱うバージョンではpages/_app.jsとpages/index.jsというファイルを*.tsx形式にリネームします。

mv pages/_app.js pages/_app.tsx
mv pages/index.js pages/index.tsx

実行

yarn devコマンドでデバッグ実行します。 正常に完了した場合、下記の表示がされます。

ready - started server on http://localhost:3000

これに従いhttp://localhost:3000にアクセスします。

next_setup

無事表示がされていました。 ホットリロードも効いているため、先ほどリネームしたpages/index.tsxを編集すれば表示も変わります。

GitHubに公開しました

まとめ

今回はNext.jsで作成したばかりのプロジェクトをTypescript対応させる手順を紹介しました。 これを基準にあれこれカスタマイズしながら学習していこうと思います。

SNSでシェアする