Next.js: Nextjs not recompiling with Docker in development

[MatteoGioioso]

Bug report

Describe the bug

I am trying to build a development environment for Nextjs with Docker.
Unfortunately looks like Nextjs is not recompiling if any changes happen.

To Reproduce

Dockerfile:

FROM node

WORKDIR /usr/src/app

COPY . .

RUN npm install

CMD [ "npm", "run", "dev" ]

Docker-compose.yml

version: '3'

services:
  frontend:
    build:
      context: ./frontend
      dockerfile: Dockerfile.dev
    volumes:
      - ./frontend:/usr/src/app
      - /usr/src/app/node_modules
    ports:
      - 3000:3000

Everything works correctly Nextjs compile successfully and displays what it should on the browser.
However when I try to change something is my index.js it does not recompile
Upon inspecting the container and the open index.js it looks like the changed has been applied successfully.

I have google a bit and I found similar linked issues:
https://github.com/zeit/next.js/issues/1961
https://github.com/zeit/next.js/issues/757
https://github.com/zeit/next.js/pull/823
However they all led to no useful solution.

Expected behavior

Should recompile

System information

• OS: Window 10
• Version of Next.js: 7.0.3

[timneutkens]

• Version of Next.js: 7.0.3

I'm assuming you mean 8.0.3.

[timneutkens]

I'm not sure what to do with this issue, there is not much to fix on the Next.js side of things. I guess docker is not relaying change events into the volume.

Maybe someone from the community has experienced this before.

[giuseppeg]

@MatteoGioioso can you try to inspect the network panel and see if it pings correctly?

[MatteoGioioso]

@giuseppeg it just pings only one time
I have tried to expose websocket port, but still nothing

module.exports = {
  onDemandEntries: {
    websocketPort: 3007,
  },
};

ports:
  - "3007:3007"

[MatteoGioioso]

Ok, after hours of trial and error I solved like this

Dockerfile:

FROM node

WORKDIR /usr/src/app

COPY . .

RUN npm install

CMD [ "npm", "run", "dev" ]

Docker-compose.yml

version: '3'

services:
  frontend:
    build:
      context: ./frontend
      dockerfile: Dockerfile.dev
    volumes:
      - ./frontend:/usr/src/app
      - /usr/src/app/node_modules
    ports:
      - 3000:3000

next.config.js:

module.exports = {
  webpackDevMiddleware: (config) => {
    // Solve compiling problem via vagrant
    config.watchOptions = {
      poll: 1000,   // Check for changes every second
      aggregateTimeout: 300,   // delay before rebuilding
    };
    return config;
  }
};

[russelh15]

I just ran into this issue. I was able to get it working without touching the next.config.js file. Here's my setup. I'm using Next 8.0.3

Dockerfile

FROM node:10

#Setup working directory
RUN mkdir -p /usr/src/app
WORKDIR /usr/src/app

#Install dependencies
COPY package.json yarn.lock ./
RUN yarn install

#Copy source files
COPY . .

#Running the app
CMD ["yarn","dev"]

docker-compose.yml

version: '3'
services:
    web:
      build: .
      volumes:
          - .:/usr/src/app
      ports:
        - 3000:3000

[Galiaf47]

volumes:
- .:/usr/src/app

@russelh15 missed "- /usr/src/app/node_modules" volume. This one is actually very important to not mix host modules with container modules. If you run a linux image on windows host as an example.

Also, what exactly in this config solves the issue?

[codyspring]

I ran into a similar problem. Below is my working config.

Dockerfile (nothing crazy)

FROM node:12.16-alpine as development

WORKDIR /usr/src/web

COPY package*.json ./
RUN npm install

COPY . .

RUN npm run build

docker-compose.yml (see comments)

services:
  web:
    container_name: next-web
    build:
      context: .
      target: development
    volumes:
      # Required to sync file changes.
      - .:/usr/src/web
      # Required to not break node modules.
      - /usr/src/web/node_modules
      # Required for next to do it's thing.
      - /usr/src/web/.next
    ports:
      - 3000:3000
    command: npm run dev

[shrmaky]

@codyspring - The above Docker-Compose works for me but the page load time is too slow when i compare with direct yarn dev...