Docker: Live / Hot Reloading with Next.JS

Ben Grunfeld

Aug 16, 2020·2 min read

Looking for a great (remote only) React Dev? Or just feel like having a chat? Visit my profile on LinkedIn and say hi! 😃

This one really took me a while. I got all the concepts, but there were several coffee (pfft… and cookie) breaks until I figured out exactly what the directory mappings needed to be.

tl;dr

Implementing Hot Reloading with Docker and Next.JS is literally two (2) lines of code! npm run dev, and a mapping between your local project directory and a directory on your Docker instance, using a volume:

./:/src

That’s it! (although I use usr/src/app instead of src in my app).

Step 1: Build a Next App

No crazy stuff here. Just go ahead and build a Next.JS app the same way you always would. e.g.

npx create-next-app YOUR_APP_NAME

FYI — the app that I implemented Docker Hot Reloading with is a CRUD app that stores and retrieves data from a MongoDB database. You can gaze on the entire app in all its glory here:

https://github.com/bengrunfeld/docker-nextjs-mongo

Step 2: Create A Dockerfile

Next, you’ll need to create a Dockerfile. I’m not going to go into how Dockerfiles work in this post. If you’d like to learn about them, check out my Docker tutorial here.

The most important line in this file is the last one. Instead of npm start, we’re using npm run dev to handle the hot reloading.

Step 3: Create a Docker Compose File

The most important code in your docker-compose.yml file is on line 10 and 11.

For your web container, you define a volume, and then map it from your local project directory to one on the Docker instance.

Now you just need to run the following command and you’re home and hosed.

docker-compose up -d --build

Go to your web browser and navigate to localhost:3000, and if you then change any code in your project and save it, you’ll see the page update immediately.

Eh voila, you’re done!

Conclusion

I wish that there had been an article as simple and straightforward as this one online when I tried to set this up. Hopefully it saves you having to schlep through tons of tutorials and YouTube videos to get it working.

One last thing. You may be concerned about these development settings polluting your production Dockerfile and docker-compose.yml. Using the -f flag, you can specify which files you want to use, and you can read up about that more here.

Happy coding! 😃