はじめに

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のインストール

asdf pluginの追加

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

asdfでnodejsのインストール
```
asdf install nodejs 20.9.0
```
Nodejs 20.9.0のセット
```
asdf global nodejs 20.9.0
```
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テストが回せるようにしていきます。