Handling environment variables in Next.js

February 28, 2022

In the development environment, you can describe the environment variable in .env.local and get process.env.

# .env.local
HELLO=こんにちは

const hello = process.env.HELLO;
  • Next.js will replace process.env.* at build time.
  • By default, environment variables, loaded in .env.local, are only available in the Node.js environment. They are not available in the browser.
  • If you prefix the environment variable with NEXT_PUBLIC_, you can use it from a web browser.
# .env.local
# you can use it from a web browser.
NEXT_PUBLIC_HELLO=こんにちは

References

Tweet