Next.jsの環境を整備する（Mac）

作りたいアプリができ、せっかくなので流行のフロントエンドの技術を合わせて試してみます。今回はNext.jsを使うため環境を整備していく。

やりたいこと

Next.jsのチュートリアルを進める
（Node.jsはインストール済み）

Next.jsの環境整備

https://nextjs.org/learn/basics/create-nextjs-app
上記に沿って進める

PJを作るコマンド実行

$ npx create-next-app nextjs-blog --use-npm --example "https://github.com/vercel/next-learn/tree/master/basics/learn-starter"
$ cd nextjs-blog
$ npm run dev

ブラウザで確認する

いけました

サーバサイドはTypescprit/フロントエンドはNext.jsで進めます。Vue.jsやNuxt.jsは昔使ったことがありますがそれとの比較なども含めて使っていきたい。

dockerにデプロイする

公開時にはdockerを使うので最初からdockerで動かしておく。

以下を参考に進めます
https://nextjs.org/docs/deployment
Docker Image

$ npx create-next-app --example with-docker testapp
$ docker build -t testapp .
$ docker run -p 3000:3000 testapp

Next.jsをTypeScriptにする

画面が参照できました。順次進めていきます。