【Next.js】ローカルで立ち上がらなかった原因と解決方法まとめ

はじめに

Next.jsをDockerで構築中、なぜかlocalhostにアクセスしても何も表示されないエラーが発生した原因と対処法になります

docker-compose.ymlの状況

services:
  frontend:
    container_name: trade-rush-frontend
    build:
      context: .
      dockerfile:  ./frontend/Dockerfile
    tty: true
    stdin_open: true
    volumes:
      - ./frontend:/app
    ports:
      - 3001:3001

• docker-compose upで起動したがhttp://localhost:3001を開いても起動ができない

ports:3000はrailsで使用しているため3001にしました

原因と対策

原因

commandが指定されていない
node REPL が起動していた
docker-compose.yml にcommand: npm run devがなかった為コンテナが起動したときに Next.jsの「対話モード（REPL）」が立ち上がっていた

対策

docker-compose.yml に command: npm run dev を明示
これにより、Next.js のろーかるサーバが正しく起動されるようになる

command: npm run dev

原因

package.jsのscriptsにportを指定していなかった

対策

package.jsonのscriptsにport3001を明示した

"scripts": {
  "dev": "next dev -p 3001",
  "build": "next build",
  "start": "next start"
}

まとめ

• npm run devはNext.jsのローカルサーバを立ち上げる基本コマンド

• package.jsonのscripts.devにnext devが設定されている

• Dockerでもcommand: npm run devを使えばOK