nextjs with typescript:01 アプリ作成と動作確認
typescriptをつかったnext.jsのチュートリアル的なものを書いていこうと思います。
node.js/npmをインストール(windows)
以下からインストールする。
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」で追記された型データをインストールする
もっと応援したいなと思っていただけた場合、よろしければサポートをおねがいします。いただいたサポートは活動費に使わせていただきます。