Below is a minimal, environment-independent Next.js 14+ hello-world example using the App Router. It demonstrates how to inject environment variables at runtime (not build time) using a Docker entrypoint script, making them available in the browser.
We avoid installing Node.js, npm, or running npx create-next-app@latest hello-next-app on the local machine, we will generate and build your Next.js app entirely inside a Docker container.
docker run --rm -it -v $PWD:/app -w /app node:18-alpine npx create-next-app@latest hello-next-appI changed only one default. Code inside a src/ directory? to Yes
Then I made a few changes, which you can see in the commits. I also fixed some typos. You can compare the initial commit with a later one by compare commits or tags in GitHub as in git diff command. Here is init...window or window...standalone comparison.
Get the code and build the image
git clone https://github.com/loopold/nextjs-vars.git
cd nextjs-vars
docker build -t my-next-app hello-next-app/Run
docker run --rm --env-file .env.development -p 3002:3000 my-next-app
docker run --rm --env-file .env.production -p 3001:3000 my-next-appor
docker-compose up -dVariables that were read from the .env.development file.: http://localhost:3002
Hello World
{
"NEXT_PUBLIC_APP_URL": "https://portal.dev.example.com/",
"NEXT_PUBLIC_API_URL": "https://api.dev.example.com/",
"NEXT_PUBLIC_STORE_IOS_URL": "https://apps.apple.com/us/app/example/id6123456789",
"NEXT_PUBLIC_STORE_ANDROID_URL": "https://play.google.com/store/apps/details?id=com.example"
}Server and Client Components demo: http://localhost:3002/hello
Hello World from server component
Result: Hello from server action!
Hello Next.js! from client component
Result from route handler: Hello from route handler!
docker compose down # if compose was used
docker rmi my-next-app:latest