NextJS: Environment Variables - Caution when deploying to vercel

What are Environmental Variables?

Environmental variables are values that can be passed to the operating system or application at runtime. These variables can be used to store and retrieve important information, such as database credentials, API keys, and other sensitive data.

One of the main benefits of using environmental variables is that they allow developers to easily switch between different configurations or environments, such as development, staging, and production. This is especially useful when working on a team, as it allows each developer to have their own unique set of variables without affecting the rest of the team.

Environmental variables also help to improve security by allowing developers to store sensitive information outside of the codebase. This means that sensitive data, such as passwords and API keys, is not stored in plaintext and is not easily accessible to unauthorized parties.

In addition to improving security and flexibility, environmental variables can also help to improve the maintainability of an application. By separating configuration from code, it becomes easier to update and modify an application without having to make changes to the code itself.

Overall, environmental variables are an essential tool in the software development life cycle, as they help to improve security, flexibility, and maintainability in an application.

NextJS Environmental variables

When defining env variable if you need the browser also to get the value then you need to prefix it with NEXT_PUBLIC_ which is clearly mentioned in the documentation, but I struggled to understand what was happening when a certain variable was not accessible on the client side code in the application.

Caution when deploying to Vercel

When deploying it in vercel you need to be careful as you cannot use the $<Variable name> in the NextJS definition as mentioned in the NextJs Documentation something along the lines of:

js
HOSTNAME=localhost
PORT=8080
HOST=http://$HOSTNAME:$PORT

Connecting to Supabase

use the below environmental variables in your project root directory from where you run npm run dev

js
NEXT_PUBLIC_SUPABASE_URL=https://projecturl.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=<YOUR ANON KEY from Supabase dashboard>
NEXT_PUBLIC_MEDIA_STORAGE_PATH=$NEXT_PUBLIC_SUPABASE_URL/storage/v1/object/public/<your public bucket name>/