docker-compose volumes do not refresh NextJS HMR

Question

I am trying to dockerize a Next JS application for development, but I cannot get the docker-compose modules to reload the webpack HMR. When I make a change, it takes like a minute to detect and reload, and the modifications do not appear on the browser unless I restart the container. I have read quite a few guides and posts about how to set up HMR with docker, but none of them worked thus far.

Here is my Dockerfile.dev

FROM node:lts

RUN mkdir -p /home/app
WORKDIR /home/app

COPY package.json yarn.lock /home/app/

RUN yarn

COPY . .

CMD ["yarn", "dev"]

And the docker-compose.yaml:

version: '3'
services:
    database:
        image: 'mariadb:latest'
        restart: always
        environment:
            MYSQL_ROOT_PASSWORD: password
    api:
        depends_on:
            - database
        build:
            dockerfile: Dockerfile.dev
            context: ./api
        volumes:
            - /home/app/node_modules
            - ./api:/home/app
        ports:
            - 4000:3000
    client:
        depends_on:
            - api
        build:
            dockerfile: Dockerfile.dev
            context: ./client
        volumes:
            - /home/app/node_modules
            - ./client:/home/app
        ports:
            - 3000:3000

Answer 1

I upvoted the answer given by @user1665355 above because it worked for me.

The solution in the linked article is to add the following to your next.config.js:

module.exports = {
  webpackDevMiddleware: config => {
    config.watchOptions = {
      poll: 1000,
      aggregateTimeout: 300,
    }

    return config
  },
}

This fixed the 404 error I was getting on webpack-hmr when Next.js was dockerized.

Answer 2

You can read here https://dev.to/kumar_abhirup/next-js-docker-made-easy-2bok. You need to add HMR as the author says.