nextjs with typescript:01 アプリ作成と動作確認

typescriptをつかったnext.jsのチュートリアル的なものを書いていこうと思います。

node.js/npmをインストール(windows)

以下からインストールする。

Node.js

nodeと一緒にnpmもインストールされるので、コマンドプロンプトでバージョン確認ができればOK。

【実行例】

$ node -v
v12.16.1

$ npm -v
6.13.4

Yarnのインストール

Yarn ⇒ Facebook製のnpmの改良版みたいなもの。npmに「-g」をつけてグローバル環境にインストール。

$ npm install -g yarn

※パッケージマネージャーは「yarn」でやっていきます

ひな形アプリでセットアップ

「npxコマンド」で「typescriptのサンプルアプリ」をひな型にしつつアプリセットアップ。（npxはnpmのパッケージをインストールしなくてもバイナリが実行できるコマンドみたいなもの）

npx create-next-app --example with-typescript

途中で聞かれるアプリ名は好きなものを設定（ここではデフォルトのmy-app）

動作確認

cd my-app
yarn dev

出力の通り3000番ポートにローカルアクセスする。　以下の画面が出ればOK。

依存ファイルのライブラリのバージョンをアップグレードする

ひな型にしたサンプルアプリのバージョンが古い場合はアップグレードをする

yarn upgrade --latest​

その他：typesyncを使う

typesyncを利用すれば、必要なtypescriptの型定義をdevDependencies側に入れてくれるようになる

npm install -g typesync

【使い方】

コマンドをたたけばいい。

typesync

※package.jsonに追記されるので「yarn」で追記された型データをインストールする