Next.jsとTypescriptで開発環境の構築していきます。
環境{
Mac Os 12.5
Vscode
}
備忘録です。
初めに
エディタのターミナルでnode.jsのバージョン（存在）を確認
node -v
// v16.14.0
nodeの存在を確認。
これは、JavaScriptのライブラリを管理するパッケージ。
パッケージとしてまとめたファイルが作られる。＝package.json
具体的にいつ使うのかはこの後すぐに分かる。
アプリケーションの作成
①ファイルの保管場所を決める。今回はデスクトップ。
cd desktop
//ユーザー名＠ユーザー名PC desktop ← となればOK
② アプリ名を決め、コマンドを実行
npx create-next-app {好きなアプリ名} --use-npm --typescript
※{}は不要
npx create-next-app {好きなアプリ名} --typescript
下段はnpxを使う方法。今回は上段のnpmを使用しますが、npxの方が便利だと思う。
参考：npmとnpx
Need to install the following packages : create-next-app Ok to proceed?
次のパッケージをインストールする必要があるよ。 create-next-app 続行する？
//y (yes)で実行
//Success!
となればOK。
アプリを立ち上げて画面を表示する
①作成したファイルを開く
command + O でフォルダーを参照しデスクトップから作成したフォルダーを選択
②package.jsonを開いてみる
package.jsonというファイルの中に以下の記述。
"scripts": {
"dev": "next dev",
//以下省力
},
"dev"に注目。
今回のNext.jsとtypescriptではアプリを立ち上げる際にターミナルで下記のように入力し
出力されたurlをアドレスバーなどにドラッグ＆コピーで画面を表示できる。
npm run dev
// url: http://localhost:3000
となればOK。お疲れ様でした。
以降はファイルの整理と各種ライブラリーのインストールをしていきます。
後書き 注意事項 結構重要かも
ご覧いただきありがとうございました。素人ならが毎日Webアプリ制作をして遊んでます。
親の脛をかじる正真正銘20代ニートです（親にお金を渡したら怒られたので仕方なく、、）
さて、今回インストールしたNext.jsをReact(Js)のフレームワークです。
何もしなければ常に最新のReactバージョンがインストールされるわけですね。
今回のReactのバージョンは@18.20です。
バージョンアップ間も無くのため、各種ライブラリ等が対応できない場合があり、エラーが出続けることがあります。
ということで、私はこの後にReactのバージョンをあえて@17.02へダウングレードします。
様子を見て@1８を使っていきます。