Altering Environment Variables After Building static web in Next.js

Typically, when you build a static website on Next.js, all process.env variables are transformed into static during the build process. As such, they cannot be modified post-build.

However, for specific use cases; for instance, generating a single build and utilizing it in various environments would need to change the endpoint.

TL;DR

Simply add the envconfig.json file to your public directory. Then, in your code, fetch data from this file and utilize it accordingly.

How to

After build

I put it within Docker Nginx and experimented with updating the configuration in the file.

docker run --name some-nginx -p 8080:80 -v C:\Users\XXXXX\Documents\git\XXXX\my-app\out:/usr/share/nginx/html/ nginx

In conclusion

you can utilize the ‘fetch’ function to retrieve configuration data on your static website, following this straightforward example. However, when implementing it, you’ll need a mechanism to save and use these configurations.