Back to Blog Page
Frontend Development

How to Create Environment Variables Inside next.config.js File and Use them

How to Create Environment Variables Inside next.config.js File and Use them

Written by Kolade Chris | Dec 24, 2022 | #Next.js #WebDev | 1 minute Read

Environment variables let you store secrets you don’t want to expose for security reasons. So, they are useful in concealing private information such as API keys and other secrets.

The normal way many developers create environment variables is to create a .env file and put the variable identifiers and values there:

1
NEXT_PUBLIC_APP_TOP_SECRET = MyAppTopSecret;
2
NEXT_PUBLIC_API_KEY = mYaPiKeY;

But you can also create them inside the next.config.js file. The benefit is that you won’t need to prefix the variables with NEXT_PUBLIC_ as you can see in the code snippet above.

How to Create env Variables Inside next.config.js File

Creating environment variables inside the next.config.js file is not a straightforward process, it is not hard though. What I mean is, you cannot just put them inside the next.config.js file as you do inside the env file.

To create environment variables inside the next.config.js file, you have to define an env key as a part of the nextConfig object and put them inside of it in a key:value pair:

1
env: {
2
    APP_TOP_SECRET: 'MyAppTopSecret',
3
    API_KEY: 'mYaPiKeY',
4
  },

If you are using the latest version of Next JS, the whole file would look like this:

1
const nextConfig = {
2
  // env variables start
3
  env: {
4
    APP_TOP_SECRET: 'MyAppTopSecret',
5
    API_KEY: 'mYaPiKeY',
6
  },
7
  // env variables end
8
};

Subscribe to my newsletter for coding tips, videos from reputable sources, articles from OG tech authors, and a ton of other goodies.

No BS. No fluff. Just pure software development goodies on a Sunday every week.

How to Use Environment Variables of a next.config.js File

The reason why you created the environment variables is to use them. So, to use the variables, prefix their names with process.env. like this:

1
process.env.APP_TOP_SECRET;
2
process.env.API_KEY;

And if you want to display them in the browser, you can put them inside curly braces:

1
<h2>My Environment Variables</h2>
2
<p>My App's Top Secret = {process.env.APP_TOP_SECRET}</p>
3
<p>My API Key = {process.env.API_KEY}</p>

Screenshot 2023-03-27 at 14.47.23.png

Thank you for reading. Don’t hesitate to share the article so others who need it can read it.