チャットApp(next-app & deploy)

今回はマスターストーリーの二つを一気にやります。

とはいえコマンドを打てば簡単に出来るので、そこまで難しくありません。

create-next-app

reactを触られたことのある方だと馴染みのあるコマンドかもしれません。next.jsはreactのフレームワークだからというわけではないかもしれませんが

yarn create next-app アプリ名

で簡単にアプリの開発環境を作ることが出来ます。npmではなくyarnを使ってます。一応TypeScriptで書こうと思っているので、今回はさらに

touch tsconfig.json
yarn add --dev typescript @types/react @types/node

でTypeScriptに対応させます。次にサーバーを立ち上げてきちんと環境が構築出来ていることを確認します。

yarn dev

localhost:3000からこんな感じのページが開ければOKです。

デプロイ

今回は、next.jsを作ったチーム運営しているVercelというサイトにデプロイします。このサイトはGithubと連携させることで、Gitにプッシュすると自動でデプロイしてくれます。やり方はまず、GithubにプッシュしてVercelのサイトにログイン(登録してないなら登録)します。あとは英語ですがサイトの説明に沿ってやれば問題なく出来ます。英語に自信がない人も調べればすぐ出てきます。

Next.jsや Vercelについての説明はとてつもなく完結でしたが、Qiitaなどで調べればわかりやすい記事はいくらでもあると思うので、今回はこの程度に済ませます。

続きはまた今度！