Next × TypeScript の環境構築

開発環境

・Mac Book Air（2015年）
・Node v14.4.0
・Yarn 1.22.10
・Vs Code

Next.js

Next.js（今後はNextと略称します。）とは、Facebook社によって開発されたReact.jsをベースに作られたWebフレームワークです。
Vue.jsでいうNuxt.jsみたいな感じですね。

TypeScript

マイクロソフト社が開発したオープンソース言語で、
型定義できるJavaScriptです。
JavaScriptは現在まで、型・クラスの定義がないために構築時に意図しない値が入ったり、プロパティ名が間違っていても実行するまでエラーが起きず、原因の解消に時間がかかることが多かったようです。
TypeScriptは型定義・クラス定義を可能にしより厳格な記述で制約を設けることができ、コンパイル（JavaScriptへ変換）時に制約のチェックを行います。これにより、実行しなければわからないバグを未然に防ぐことが可能となっています。

▼ 環境構築

① Node インストールされているか確認

$ node -v 
v14.4.0 // インストール済みであればバージョンが表示されます。

$ npm -v
6.14.5 // nodeが正常にインストールされていれば表示されます。

バージョンが表示されたらインストールが完了しているということになます。表示されない場合はインストールしましょう。
npmは、JavaScript系ライブラリを管理するツールです。
npmコマンドが使用できないとReactや便利なライブラリ（axiosやUI系のパッケージ）がインストール出来ないので必ず確認し進めましょう。

参考記事：https://qiita.com/kyosuke5_20/items/c5f68fc9d89b84c0df09

②Yarn インストールされているか確認

$ yarn -v
1.22.10 // インストール済みであればバージョンが表示されます。

$ npm install -g yarn // バージョンが表示されなければこのコマンドでインストール

yarnはnpmの上位互換的なポジションで、インストール速度が速いですし、パッケージ同士の依存関係を厳密に管理できます。
バージョン違いのインストールによる不一致で、プロジェクトが動かなくなるといった危険性を防いでくれるので、インストールしておいて損はありません。
ちなみにnpmコマンドのみでも進めることが可能ですので、その場合は省略してください。その場合は省略してください。

③アプリケーションを作成

$ npx create-next-app project_name

"project_name"はアプリケーションの名前です。
任意の名前で入力してください。
Success! Createdと表示すれば成功です。

※ nodeのバージョンが低いとインストールでエラーが発生し完了しないことがあるので、その場合はバージョンを最新の安定版にアップデートしましょう。
参考記事：https://tarovlog.com/2021/01/16/update-node-js/

④アプリケーションを起動

プロジェクトのディレクトリへ移動し下記のコマンドでアプリケーションを起動してみましょう。

$ yarn dev

ready - started server on 0.0.0.0:xxxxx, url: http://localhost:xxxxx
起動に成功すればURL（ローカル環境）が表示するのでブラウザで確認してみましょう。

このように、ブラウザで表示されていればNextの環境が完成です。
しかし、この状態ではまだTypeScriptの実装はできていないので次に進みましょう。

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

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

上記のコマンドをターミナルに入力しTypeScriptに必要なパッケージをインストールしましょう。

tsconfig.jsonの追加

tsconfig.jsonファイルをトップディレクトリに新規作成し、プロジェクト内のTypeScriptとJavaScriptの設定を行いましょう。
yarn dev で再度アプリケーションを立ち上げると自動で記述してくれます。なんて便利なんだ...(TT)
プロジェクトによって設定が必要な場合は変更しましょう。
設定概要はこちら

⑥拡張子を.jsから.tsx変更する

プロジェクト内のjsファイルを全ての拡張子をtsxへ変更し、
再度 yarn dev で起動しましょう。
起動後エラー表示がなければブラウザで表示されれば環境構築は完了です。

まとめ

Nextのアプリケーションの実装とTypeScriptの導入に関して記載しました。
次回は、React/Nextを触るうえで、Vs Code に入れておいた方が良い拡張機能などを記載します。