Docker: Live / Hot Reloading with Next.JS

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