DockerでNext.jsメモ

そろそろ触ってみようかな…（消極的）〆所持チェッカーを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

https://zenn.dev/temple_c_tech/articles/setup-next-on-docker

こちらを参考にEslintとPrettierの設定をしました。

sudo docker exec -it nodejs npm run devで開発環境が起動できます。

./app/src/app/page.tsxを変更&保存してみてホットリロードが効いていればとりあえず成功です。中身はまた今度…

Nodejs,Docker,Nextjs,React