Quick Fix: To pass an environment variable to a Next.js app running in a Docker container, expose it in your next.config.js file and access it using process.env.<variable_name> in your client components.
The Problem:
How to pass an environment variable to a Next.JS application running inside a Docker container, despite having added the variable to both an env file and docker-compose.yaml?
The Solutions:
Solution 1: Expose Environment Variables in `next.config.js`
By default, environment variables are only available on the server in Next.JS. To access them in client components, you need to expose them in the next.config.js file. This involves the following steps:
Create a next.config.js file in the root of your Next.JS project:
This exposes the NEXT_PUBLIC_SERVER_URL environment variable as PUBLIC_SERVER_URL in your client components. You can now access it using process.env.PUBLIC_SERVER_URL.
Solution 2: Docker Build-Time Variable Injection
Unfortunately, passing env variables at runtime into Next.JS apps running inside Docker containers is not possible. The workaround is to inject the necessary variables during build time.
Steps:
Update your docker-compose.yaml file to build the Next.JS app with the desired environment variable:
Use the injected environment variable in your Next.JS code, prefixed with process.env:
import axios from "axios";
export default axios.create({
baseURL: `${process.env.SERVER_URL}/api/v1/`,
});
Solution 3: Delay until runtime
Alternatively, you can delay fetching certain values until runtime. Somewhere in your NextJS app, you likely have a <Head> component. Within this component, you can load late-bound values at runtime using the following code:
export default function TopOfApp() {
// ... etc.
return (
<Head>
// etc.
<script src="./settings.js"></script>
</Head>
);
}
On your deployment, create a settings.js script file with the following contents:
As long as you don’t defer the script’s loading, your app will have myAppRuntimeSettings.colorOfSky available immediately.
Q&A
How can I pass the api URL as an env variable to a Next.JS app running inside a Docker container
—
Expose them in your next.config.js file.
How can I pass the api URL as an env variable to a Next.JS app running inside a Docker container
—
Pass the needed variable at build time
How can I pass the api URL as an env variable to a Next.JS app running inside a Docker container
—
Delay those values until runtime and use them via window references.
Video Explanation:
The following video, titled "From App to Cloud: Dockerfiles and Using Environment Variables at ...", provides additional insights and in-depth exploration related to the topics discussed in this post.
How to add Environment Variables in Next.JS | Using dot-files(.env) ... Docker - Passing variables into a docker container. Tobi's Developer ...
