The functionality of this environment variable only applies in the Server Side. In order to access this environment variable in the Client Side, it must be declared in the next.config.js file.

Here's how you can do it:

module.exports = {
  reactStrictMode: true,
  env: {
    BASE_URL: process.env.BASE_URL,
  }
}

1. Begin by creating three separate environment files: .env (all environments), .env.development (for development), and .env.production (for production).

2. Ensure that all your environment variables have the prefix NEXT_PUBLIC added to them.

NEXT_PUBLIC_API_URL=http://localhost:3000/

3. Remember to access these variables using the prefix process.env

process.env.NEXT_PUBLIC_API_URL

4. Don't forget to stop the server and restart it by running npm run dev

This solution is specifically designed for version 9.4.0 and newer.

For those of you working with NextJS version 9 or higher and are in need of environment variables on the browser side, remember to add the NEXT_PUBLIC_ prefix. Here is an example:

NEXT_PUBLIC_ANALYTICS_ID=123456789

For more information, please check out the documentation.

After restarting the server, everything started working smoothly for me.

1. Make changes and save them in the .env.local file
2. Stop the server and then initiate it again by running the command npm run dev
3. You will see an output similar to the following on the next line:

> <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="117a7d7e646551213f203f21">[email protected]</a> dev
> next dev

Loaded env from [path]/.env.local

After dedicating numerous hours to research, I stumbled upon a brief paragraph in both the previous and current nextjs 9.4 documentation:

• (Pre-9.4) https://nextjs.org/docs/api-reference/next.config.js/environment-variables (similar to this response)

  Next.js will substitute process.env.customKey with 'my-value' during compilation time.

• (^9.4) https://nextjs.org/docs/basic-features/environment-variables

  To safeguard server-only secrets, Next.js replaces process.env.* with the right values during compilation time.

The crucial term here is COMPILATION TIME. This indicates that you need to define these variables when executing next build and not only during next start to make these variables accessible on the client side.

To find the video reference, visit the codegrepper link here: https://youtu.be/6qhF9l_AgAk

When using process.env, it will only work on the server and not in the browser, resulting in it showing as undefined. To resolve this issue, utilize NEXT_PUBLIC_before API key in either .env.local or .env. This solution is effective for versions 9 and above of nextjs.

NEXT_PUBLIC_BACKEND_API="http://localhost:1337/graphql"

Avoid exposing secret environment variables like MongoURL and OpenAI key by refraining from using Next_PUBLIC_. Otherwise, it will be accessible to anyone using a browser.

MONGO_URL=

OPENAI_API_KEY=

Check out my latest next.config.js setup!

/** @type {import('next').NextConfig} */
const config = {
  reactStrictMode: true,
  env: {
    BASE_URL: process.env.NEXT_PUBLIC_SITE_URL,
  },
};

module.exports = config;

After restarting the server, everything ran smoothly. Currently using Next.js version 12.1.0 with TypeScript.

Incorporating the latest updates from the documentation for version v12+.

By utilizing the next.config.js file, you have the ability to define server and client variables:

module.exports = {
  serverRuntimeConfig: {
    // Only accessible on the server side
    mySecret: 'secret',
    secondSecret: process.env.SECOND_SECRET, // Utilize environment variables
  },
  publicRuntimeConfig: {
    // Accessible on both server and client
    staticFolder: '/static',
  },
}

It is also possible to use an env.local file and transfer the variable to the next.config.js file. For instance:

 publicRuntimeConfig: {
   DB_URL: process.env.DB_URL
 }

Subsequently, you can retrieve the variable like this:

import getConfig from 'next/config';
const { publicRuntimeConfig } = getConfig();
publicRuntimeConfig.DB_URL;

1. Make sure to place your .env file in the main directory of your project, not in the .src/ folder.
2. Use NEXT_PUBLIC_"name of your variable" to define your environment variable.
3. Remember to restart the server to apply changes.

Arriving late to the party, I haven't found a suitable answer for my issue with nextjs 14.

A simple solution involves accessing environment variables on the server side and passing them to the client component:

export const SSRComponent = () => {
  return <ClientComponent baseUrl={process.env.BASE_URL} />
}

Although the NEXT_PUBLIC_ prefix works fine in dev mode, it only works in production mode if the environment values are substituted at build time

Keep in mind that once your app is built, it won't respond to changes in these environment variables. This means that if you are using a Heroku pipeline to transfer slugs from one environment to another, or deploying a single Docker image to multiple environments, all NEXT_PUBLIC_ variables will be fixed with the value evaluated at build time. Therefore, these values must be correctly set during the project's build. If you require access to runtime environment values, you will need to set up your own API to provide them to the client (either on demand or during initialization).

From a devops standpoint, injecting environment variables at build time results in a different image for each set of environment values, which can be a logistical nightmare and most likely not a viable solution.

Instead of using NEXT_PUBLIC_API_URL, I mistakenly used REACT_APP_API_URL.

process.env is only functional on the server side and not in the browser, resulting in it displaying as undefined. To resolve this issue, prepend NEXT_PUBLIC_ to the API key in either .env.local or .env. This alternative proves to be effective.

found in the document https://nextjs.org/docs/pages/building-your-application/configuring/environment-variables

try using the format NEXT_PUBLIC_[...] example: NEXT_PUBLIC_API_URL

1. Double-Check Your Configuration Files:

   Ensure that your configuration files are correctly set up. It's important to have defined your environment variables in the appropriate configuration files. In Next.js, you can create different configuration files for different environments (e.g., .Env.Local for local development and .Env.Production for production). Make sure the variables you need are defined in the right configuration file.

2. Refresh Your Development Server:

   If you have made changes to your environment variables, remember to refresh or restart your development server. Sometimes, updates to environment variables may not take effect until the server is restarted.

3. Utilize process.env for Environment Variable Access:

   In Next.js, you can access environment variables using process.env. For instance:

const myVar = process.env.MY_VARIABLE;

This process is really straightforward, I'm not sure why some individuals are overcomplicating it. Just stick to the steps outlined below.

1. Make sure to place your .env.local file in the project root directory myproject/.env.local

2. An example of an environment variable in .env.local is as follows:

   NEXT_PUBLIC_MY_PACIFIC=Asia

3. Don't forget to restart your server by stopping it and then starting it again (mandatory).

4. Utilize the environment variable in the following manner:

   process.env.NEXT_PUBLIC_MY_PACIFIC

That's all there is to it. I implemented this in version NextJS 14.0, and I hope it proves helpful to many individuals.

I recently stumbled upon a useful debugging technique that proved to be quite effective. When you're in doubt, try inserting this simple debug code snippet to catch any typos that may be causing errors. If you're having trouble finding the right spot to place it in the problematic file, consider adding it to the page or component that utilizes the file.

console.log(process.env)

For those using the dotenv package and have a config with a path, you can simply delete that line.

This solution worked perfectly for my situation.