Containerizing Next.js 15 (App Router) for Local and Production
Dockerize a Next.js 15 project created with the App Router, using multi-stage builds and Docker Compose.
Next.js 15 introduces continued improvements to the App Router, and the create-next-app
CLI now provides flags like --app
, --src-dir
, and --typescript
to streamline project setup. In this tutorial, we’ll containerize such a project for both local development (with hot reloading) and production builds via Docker.
1. Creating a Next.js 15 Project
We’ll use the official CLI options:
This instructs the CLI to:
--app
: Use the new App Router (app/
directory).--src-dir
: Place code in asrc
directory for clearer organization.--typescript
: Enable TypeScript from the start.
You’ll end up with a folder structure like:
Then, verify everything runs:
Visit http://localhost:3000 to see the starter page.
2. next.config.ts
Your new Next.js project includes a TypeScript-based config (next.config.ts
). A typical minimal configuration looks like:
When you run npm run build
or npm run dev
, Next.js automatically detects and uses next.config.ts
.
3. Dockerfile for Production (Multi-Stage)
Create a Dockerfile
in your project root:
Highlights
- Multi-stage: We install and build in
builder
, then copy only compiled files to the smallerrunner
image. - App Router:
.next
includes server/client components for Next.js 15’s new structure. next.config.ts
: Copied so server code can reference it in the final container.
4. Optional Dockerfile for Local Development
If you want to develop inside Docker with hot reloading, create a Dockerfile.dev
:
Running this container with volume mounts ensures that changes on your host will trigger reloads in the container.
5. Docker Compose Configuration
5.1 Local Development
Create or update docker-compose.yml
:
./:/app
: Maps your local directory to the container, enabling hot reload./app/node_modules
: Prevents overwriting the container’snode_modules
with an empty directory from your host.
Run:
Then visit http://localhost:3000.
5.2 Production with Docker Compose
If you want Compose to handle production too:
6. Build and Run in Production (Without Compose)
If you prefer to go manual:
- Build:
- Run:
Open http://localhost:3000.
7. Common Pitfalls
- Forgetting
public/
: Make sure static assets are copied into the final container. - Hot-reload Performance: In some OSes, dev in Docker can be slower due to file sync overhead.
- App Router: The new structure differs from older
pages/
setups; ensure.next
andnext.config.ts
are copied properly.
8. Conclusion
By Dockerizing your Next.js 15 project (created with --app
, --src-dir
, and --typescript
):
- You ensure a consistent environment for dev and production.
- Multi-stage builds keep production images lightweight.
- Docker Compose simplifies both hot-reload dev and orchestrated production.
With this setup, you’ll have a smooth, repeatable workflow to leverage all the App Router features in Next.js 15—free from environment mismatches or manual deployment hassles.

Damian Hodgkiss
Senior Staff Engineer at Sumo Group, leading development of AppSumo marketplace. Technical solopreneur with 25+ years of experience building SaaS products.