Why are Next js environment variables undefined?

There are two ways to define the next js environment variable.
for serverside & clientside. For the client side, you need to add the NEXT_PUBLIC prefix in an environment variable. There may be the following reasons why your next js environment variable is undefined.

1. Check Variable Names and Prefix: To access the next js variable on the client side you need to add the prefix _Public in environment variable. to use environment variables on serverside you can use them directly without NEXT_PUBLIC. Make sure your variable names are correctly prefixed and spelled.
2. Restart the Development Server: Whenever you are adding a new variable in the .env.local file, you need to restart your Next.js development server for the changes to take effect.
3. Check .env Files: Ensure that your environment variables are correctly set in the appropriate .env files (e.g., .env.local, .env.development, .env.production). These files should be in the root directory of your project. If you’re using a specific environment, such as development or production, make sure you’re using the corresponding .env file.
4. Variable Loading: If you’re loading the environment variables asynchronously, ensure that you’re waiting for them to load before using them in your code. This is particularly important if you’re using server-side rendering (SSR) or data fetching functions.
5. Build vs. Runtime Variables: Remember that environment variables set during build time (e.g., using .env.local) will be available at runtime on both the server and the client. However, environment variables set on the server using operating system environment variables or server configuration might not be directly accessible on the client side.
6. Server vs. Client Access: Environment variables prefixed with NEXT_PUBLIC_ are available on the client side. If you need to access environment variables on the server side, use them directly without the prefix. If you’re trying to access environment variables on the client side without the prefix, they won’t be available.
7. Verifying Values: Double-check that the values assigned to your environment variables are correct. Sometimes, a typo or an incorrect value can lead to unexpected behavior.
8. Custom Server Configuration: If you’re using a custom server configuration (e.g., Express server), ensure that you’re correctly passing the environment variables to the server instance.
9. Clearing Cache: If you’ve made changes and the variables are still undefined, try clearing your browser cache and restarting your development server.
10. Deployment Environment: If the issue is occurring in a deployed environment, make sure you’ve correctly configured environment variables in your deployment settings. Different hosting platforms have their own ways of handling environment variables.
11. Console Logging: Temporarily add console.log statements to your code to print out the values of environment variables. This can help you diagnose whether the variables are being loaded correctly.

By carefully checking these aspects, you should be able to identify and resolve the issue of your Next.js environment variables being undefined.