How to get Docker working with Next.js + HMR for local development?

[xndyz]

I can't for the life of me figure out the proper setup for running next in Docker, so that file changes are actually watched and reloaded. Has anyone manged to get this working?

For reference, I have the Docker setup below:

docker-compose.yaml

version: '3.6'

services:
  postgres:
    image: postgres:12
    restart: always
    volumes:
      - db_data:/data
    env_file:
      - .env

  graphql-engine:
    image: hasura/graphql-engine:v1.2.0-beta.2
    ports:
      - '8080:8080'
    depends_on:
      - 'postgres'
    restart: always
    env_file:
      - .env

  nextjs:
    container_name: nextjs
    build: .
    ports:
      - '3000:3000'
    restart: always
    env_file:
      - .env
    volumes:
      - ./nextjs:/app
      - /app/node_modules

volumes:
  db_data:

Dockerfile

FROM node:12.16.1-stretch

ENV APP_HOME=/app

RUN mkdir $APP_HOME
WORKDIR $APP_HOME

COPY . /app
RUN yarn

EXPOSE 3000

CMD ["yarn", "next-dev"]

And get this error log:

nextjs            | yarn run v1.22.0
nextjs            | error Couldn't find a package.json file in "/app"
nextjs            | info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

[weyert]

Why not just run the Next.js app outside Dockerfile and set the environment HASURA_GRAPHQL_CORS_DOMAIN to * to ensure all domains are accepted by the Hasura instance?

[xndyz]

The convenience of just running one Docker command to get everything running, I guess.

[xndyz]

For anyone wondering, I managed to get everything working by voluming Next.js directories:

version: "3.6"

services:
  postgres:
    image: postgres:12
    restart: always
    volumes:
      - db_data:/data
    env_file:
      - .env.build

  graphql-engine:
    image: hasura/graphql-engine:v1.2.0-beta.3
    ports:
      - "8080:8080"
    depends_on:
      - "postgres"
    restart: always
    env_file:
      - .env.build

  nextjs:
    container_name: nextjs
    build: .
    ports:
      - "3000:3000"
    restart: always
    env_file:
      - .env.build
    volumes:
      - ./pages:/app/pages
      - ./@:/app/@
      - ./public:/app/public

volumes:
  db_data: