When using a custom Next.js server there are many ways for environment variables to make it into the application:
- server-side outside of Next (using dotenv)
- server-side with Next (at build time)
- server-side with Next (at run time)
- client-side with Next (at build time)
- client-side with Next (at run time)
For build time variables:
- server-side: access using process.env (dotenv or Next will likely pick it up)
- client-side: map from process.env to
env
in next.config.js
For runtime variables (see https://nextjs.org/docs/api-reference/next.config.js/runtime-configuration):
- server-side: map from process.env to
serverRuntimeConfig
orpublicRuntimeConfig
in next.config.js - client-side: map from process.env to
publicRuntimeConfig
in next.config.js
Other note:
- Next.js 9.4 will automatically make
NEXT_PUBLIC_*
env variables available client-side - Next.js 9.4? loads
.env
files variables intoprocess.env