Files
JUNAID ALI KHAN c776c25b59 docs(docker): update base image to node:20-alpine in Docker examples (#83125)
This PR updates all example Dockerfiles that were using `node:18-alpine`
to `node:20-alpine`
to align with current LTS and address known issues in Node 18 images.

- examples/with-docker/Dockerfile
- examples/with-docker-compose/next-app/prod.Dockerfile
- examples/with-docker-compose/next-app/dev.Dockerfile
- examples/with-docker-multi-env/docker/development/Dockerfile
- examples/with-docker-multi-env/docker/production/Dockerfile
- examples/with-docker-multi-env/docker/staging/Dockerfile

I verified local builds for each example. No behavior changes;
docs/examples only.


https://github.com/vercel/next.js/issues/78465

---------

Co-authored-by: Joseph <joseph.chamochumbi@vercel.com>
2025-09-02 19:06:42 +02:00
..

With Docker - Multiple Deployment Environments

This examples shows how to use Docker with Next.js and deploy to multiple environment with different env values. Based on the deployment documentation.

How to use

Execute create-next-app with npm, Yarn, or pnpm to bootstrap the example:

npx create-next-app --example with-docker-multi-env nextjs-docker-multi-env
yarn create next-app --example with-docker-multi-env nextjs-docker-multi-env
pnpm create next-app --example with-docker-multi-env nextjs-docker-multi-env

Enter the values in the .env.development.sample, .env.staging.sample, .env.production.sample files to be used for each environments.

Using Docker and Makefile

Development environment - for doing testing

make build-development
make start-development

Open http://localhost:3001

Staging environment - for doing UAT testing

make build-staging
make start-staging

Open http://localhost:3002

Production environment - for users

make build-production
make start-production

Open http://localhost:3003

Running Locally

First, run the development server:

npm run dev
# or
yarn dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying pages/index.js. The page auto-updates as you edit the file.

API routes can be accessed on http://localhost:3000/api/hello. This endpoint can be edited in pages/api/hello.js.

The pages/api directory is mapped to /api/*. Files in this directory are treated as API routes instead of React pages.