【Day 4】Web環境構築 - Next.jsの起動まで

はじめに

---

2023年アドベントカレンダー4日目です。

昨日は画面デザインを作るストーリーを消費しました。

今回は「開発者はWebの開発を進めることができる」を消費していこうと思います。

Next.jsの環境構築

NodeJSのインストール

記事を書いている現在のLTSを調べたところ、

という状態だったので、20.9.0をインストールすることにします。

asdfでのインストール手順を書いていきますが、
インストール方法はおまかせします。

asdfのインストール

git clone https://github.com/asdf-vm/asdf.git ~/.asdf --branch v0.13.1

gitがinstallされていない場合はインストールしてください。

nodejsのインストール

1. asdf pluginの追加

   asdf plugin add nodejs https://github.com/asdf-vm/asdf-nodejs.git
   

2. asdfでnodejsのインストール

   asdf install nodejs 20.9.0
   

3. Nodejs 20.9.0のセット

   asdf global nodejs 20.9.0
   

4. Nodejsのバージョン確認

   node -v
   v20.0.9
   

   Nodejsがインストールできました

CreateNextApp

day 1で作成したディレクトリ構成にしていきます。

npx create-next-app web
✔ Would you like to use TypeScript? …       Yes
✔ Would you like to use ESLint? …           Yes
✔ Would you like to use Tailwind CSS? …     Yes
✔ Would you like to use `src/` directory? … Yes
✔ Would you like to use App Router? (recommended) … Yes
✔ Would you like to customize the default import alias (@/*)? … No

エイリアスをカスタマイズするかどうかの設定のみNoにして、他はYesにしました。

├── web
│   ├── README.md
│   ├── app/
│   ├── next-env.d.ts
│   ├── next.config.js
│   ├── node_modules/
│   ├── package-lock.json
│   ├── package.json
│   ├── postcss.config.js
│   ├── public/
│   ├── tailwind.config.ts
│   └── tsconfig.json

こうなったはずです。

起動

cd web/
npm run dev

localhost:3000

起動しました

次はE2Eテストが回せるようにしていきます。