そろそろ触ってみようかな…(消極的)〆所持チェッカーをreactで書き直したいな…と計画中
DockerでNode.jsインストール
docker-compose.yaml
version: '3'
services:
app:
image: node:20-bookworm-slim
working_dir: /app
container_name: nodejs
ports:
- "3000:3000"
tty: true
environment:
- WATCHPACK_POLLING=true
volumes:
- ./app:/app
- node_modules:/app/node_modules
restart: always
networks:
- mynetwork
volumes:
node_modules:
networks:
mynetwork:
external: true
WATCHPACK_POLLING=true
を入れないとホットリロードができないらしいので記述。
新規Next.jsアプリ作成
sudo docker compose up -d
で起動。sudo docker exec -it nextjs /bin/bash
でコンテナ内に入ってnpx create-next-app@latest
で新規Next.jsアプリを作成
What is your project named? app
Would you like to use TypeScript? No / Yes
Would you like to use ESLint? No / Yes
Would you like to use Tailwind CSS? No / Yes
Would you like to use src/ directory? No / Yes
Would you like to use App Router? (recommended) No / Yes
Would you like to customize the default import alias? No / Yes
こちらを参考にEslintとPrettierの設定をしました。
sudo docker exec -it nodejs npm run dev
で開発環境が起動できます。
./app/src/app/page.tsxを変更&保存してみてホットリロードが効いていればとりあえず成功です。中身はまた今度…