Docker-compose doesn't finish when building next.js component

I've been trying to build my docker-compose for a next app, but the docker ends up hanging. I let it run for over 30 minutes before killing the process. I don't think I have any huge packages, and as of right now, the app is basically the default init that is included in the NextUI.

# Dockerfile
FROM node:alpine

RUN mkdir -p /app

WORKDIR /app

COPY package*.json /app

RUN npm install

COPY . /app

EXPOSE 3000

RUN npm run dev

And here's the docker-compose file that I have. I shortened the other containers since they are fine

version: '3.8'

networks:
  default:

services:

  mysql-db:
    ...

  nestjs-app:
    ...
    
  nextjs-app:
    container_name: nextjs-app
    # depends_on: 
      # - nestjs-app
    build:
      context: ./nextjs-app
      dockerfile: Dockerfile
    restart: unless-stopped
    env_file: ./.env
    ports:
      - $NEXTJS_APP_LOCAL_PORT:$NEXTJS_APP_DOCKER_PORT
    stdin_open: true
    tty: true
    volumes:
      - ./nextjs-app:/app
      - /app/node_modules
      - /app/.next
    networks:
      - default

volumes: 
  mysql-volume:

And here's my package.json, is this too large for docker to handle or something? It's perfectly fine when I run it on my local machine, and it doesn't quit with an error or anything like that, it just runs and never finishes.

{
    "name": "next-app-template",
    "version": "0.0.1",
    "private": true,
    "scripts": {
        "dev": "next dev",
        "build": "next build",
        "start": "next start",
        "lint": "eslint . --ext .ts,.tsx -c .eslintrc.json --fix"
    },
    "dependencies": {
        "@nextui-org/button": "^2.0.31",
        "@nextui-org/code": "^2.0.27",
        "@nextui-org/input": "^2.1.21",
        "@nextui-org/kbd": "^2.0.28",
        "@nextui-org/link": "^2.0.29",
        "@nextui-org/navbar": "^2.0.30",
        "@nextui-org/react": "^2.3.6",
        "@nextui-org/snippet": "^2.0.35",
        "@nextui-org/switch": "^2.0.28",
        "@nextui-org/system": "2.1.0",
        "@nextui-org/theme": "2.2.0",
        "@react-aria/ssr": "^3.9.2",
        "@react-aria/visually-hidden": "^3.8.10",
        "@types/node": "20.5.7",
        "@types/react": "18.3.2",
        "@types/react-dom": "18.3.0",
        "@typescript-eslint/eslint-plugin": "^7.10.0",
        "@typescript-eslint/parser": "^7.10.0",
        "autoprefixer": "10.4.19",
        "clsx": "^2.0.0",
        "eslint": "^8.56.0",
        "eslint-config-next": "14.2.1",
        "eslint-config-prettier": "^8.2.0",
        "eslint-plugin-import": "^2.26.0",
        "eslint-plugin-jsx-a11y": "^6.4.1",
        "eslint-plugin-node": "^11.1.0",
        "eslint-plugin-prettier": "^5.1.3",
        "eslint-plugin-react": "^7.23.2",
        "eslint-plugin-react-hooks": "^4.6.0",
        "eslint-plugin-unused-imports": "^3.2.0",
        "framer-motion": "^11.1.1",
        "intl-messageformat": "^10.5.0",
        "next": "14.2.3",
        "next-themes": "^0.2.1",
        "postcss": "8.4.38",
        "react": "18.3.1",
        "react-dom": "18.3.1",
        "tailwind-variants": "^0.1.20",
        "tailwindcss": "3.4.3",
        "typescript": "5.0.4"
    }
}

Solution

RUN statements in a Dockerfile are run at build time, so your

RUN npm run dev

causes the webserver to start during the build and it never finishes.

To get it to run at run-time instead, you should use the CMD statement, so it becomes

CMD npm run dev

Then your build should finish and your webserver start when you run the container.