Hot Module Reloading with Next.js Docker development environment in 4 steps
Tags: react, tutorial, webdev, docker
Published: 2019-08-27 12:52:53

This post will go through how to add hot module reloading to Next.js running a docker environment. This is critical to development for your Next.js application because you want the app to reload your webpage as you change files in the application’s folder. When we are finished, any changes that you make to your React codebase will automatically be reloaded and you should see the changes show up in your development environment within 1 second of the change.

**Video of what we are doing:**

{% youtube 4w0tM-dXXEQ %}

**Step 1: Create a Dockerfile for your Next.js application.**

We’ve previously built a `Dockerfile` for our Next.js application in a [previous blog post](https://www.codemochi.com/blog/2019-07-08-prisma-2-nextjs-docker/), but if you are trying to dockerize your application for the first time, you need to create a `Dockerfile`.

```Dockerfile
FROM node:10.16.0

RUN mkdir /app
WORKDIR /app

COPY package*.json ./
RUN npm install

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

The idea here is to start with a base ubuntu image and copy the `package.json` and `package-lock.json` files into the directory and running an `npm install` command.

**Step 2: Add a volume mount between your host and docker environment.**

We are using docker-compose to create a volume mount between the `/app` directory and our actual working directory on our native operating system (`/frontend`). The service block for this application looks like this- where frontend is the directory that our Next.js application lives in.

```docker-compose.yml
  frontend:
    container_name: frontend
    ports:
      - '3000:3000'
    build:
      context: frontend
      dockerfile: Dockerfile
    volumes:
      - ./frontend:/app
      - /app/node_modules
      - /app/.next
```

**Step 3: Add docker volumes for your node_modules and .next folders.**

As we allude to in Step 2, we also need to add docker volumes for the `node_modules` and `.next` folders so that docker will use the docker folders instead of the host OS folders.

**Step 4: Modify our webpack middleware for our Next.js app.**

In the `frontend/next.config.js` file, we need to give the webpack middleware, instructions for when to reload itself. If your app does not have a next.config.js file, you can simply add the following code:

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

For our previous project, we don’t need to create an entire new object to export, we can instead just add the `webpackDevMiddleware` block to our already existing configuration object:

```js
const withCSS = require('@zeit/next-css')

module.exports = withCSS({
  target: 'serverless',
  env: {
    BACKEND_URL: process.env.BACKEND_URL,
  },
  webpackDevMiddleware: config => {
    config.watchOptions = {
      poll: 1000,
      aggregateTimeout: 300,
    }
    return config
  },
})
```

That should be it- you should now see that as you update your react components from within Next.js, that they instantly show up as changed in your web browser without having to run a `docker-compose down` followed by `docker-compose up`.


**There is more where that came from!**
[Click here to give us your email and we'll let you know when we publish new stuff.](https://gmail.us20.list-manage.com/subscribe?u=37f38485b2c7cff2f3d9935b5&id=e3bc056dde) We respect your email privacy, we will never spam you and you can unsubscribe anytime.

Originally posted at [Code Mochi](https://www.codemochi.com/blog/2019-08-27-nextjs-hmr/).