Using Environment Variables Set in Vercel with Next.js

Setting Environment Variables on Vercel

Vercel Environment Variables Documentation

You can configure environment variables for the following three environments:

Environment	Description
Production	Production environment
Preview	Environments deployed for non-production (e.g., feature/xxx branches)
Development	Your local development environment

In addition, there are three types of values you can set:

Type	Description
Plaintext	Plain text
Secret	Secure values (encrypted / not available in Development environment)
Reference to System Environment Variable	Values set by default on Vercel (referenced by name)

You can set these from "Project Settings" > "Environment Variables".

From Next.js 9.4 onwards, if you set an environment variable with the NEXT_PUBLIC_ prefix, it can be used directly without defining it in next.config.js :sparkles:

Example)
Setting NEXT_PUBLIC_API_URL as Plaintext. It can be referenced in Next.js as follows:

process.env.NEXT_PUBLIC_API_URL

*Note: To use the environment variables as shown above, you must use vercel dev as the command to start Next.js.

Installing Vercel CLI for Next.js

To use the vercel command, install the Vercel CLI.

$ yarn global add vercel

Both vercel and vc can be used as commands.

Login

$ vercel login

When you run the command above, you will be asked for initial authentication. Enter the email address registered with Vercel, and a confirmation email will be sent.

$ vercel login
Vercel CLI 21.0.1
> No existing credentials found. Please log in:
We sent an email to [e-mail]. Please follow the steps provided inside it and make sure the security code matches XXXXXXXX.
✔ Email confirmed
Congratulations! You are now logged in. In order to deploy something, run `vercel`.
💡  Connect your Git Repositories to deploy every branch push automatically (https://vercel.link/git).

↓ The confirmation email received (Verify it after confirming it matches the code in the email)

The authentication files created at this time are as follows:

~/.config/configstore/update-notifier-vercel.json
~/.local/share/com.vercel.cli/auth.json 
~/.local/share/com.vercel.cli/config.json

Linking with an Existing Project

Next, when you run the vercel command, the project link settings will begin.

Vercel CLI 21.0.1
? Set up and deploy “/usr/src”? [Y/n] y
? Which scope do you want to deploy to? xxx * Select here if you belong to multiple teams
? Link to existing project? [y/N] y
? What’s the name of your existing project? xxxx * Select the project to be linked
🔗  Linked to xxxxxxxx/xxxxx (created .vercel)
🔍  Inspect: https://vercel.com/xxxxxxx [5s]
✅  Preview: https://orbital-xxxxxxx.vercel.app [58s]
📝  To deploy to production (xxxxxxxxx), run `vercel --prod`

After answering the questions, a .vercel directory is created, along with the following file:

• project.json

{"projectId":"xxxxxxxxxxxxxxx","orgId":"team_xxxxxxxxxx"}

• README.txt

> Why do I have a folder named ".vercel" in my project?
The ".vercel" folder is created when you link a directory to a Vercel project.

> What does the "project.json" file contain?
The "project.json" file contains:
- The ID of the Vercel project that you linked ("projectId")
- The ID of the user or team your Vercel project is owned by ("orgId")

> Should I commit the ".vercel" folder?
No, you should not share the ".vercel" folder with anyone.
Upon creation, it will be automatically added to your ".gitignore" file.

Success if it is deployed to Vercel. After that, you can use Vercel environment variables by starting with vercel dev.
*Note: To set a port with vercel dev, specify it with -l like vercel dev -l 3005.

[Supplement] If you are using Docker

If you are using Docker, the authentication information for vercel cli will be lost when you restart the container. To persist it, you can either bind the host-side volumes or create and bind a volume specifically for authentication information.

• Example of binding host-side volumes

  services:
    app:
      volumes:
            - ~/.config/configstore:/root/.config/configstore
            - ~/.local:/root/.local
  

• Example of creating and binding a volume for authentication information

  volumes:
    config_data:
    local_data:
  
  services:
    app:
      volumes:
            - config_data:/root/.config/configstore
            - local_data:/root/.local
  

Bad Know-how

• Error: The dev script in package.json must not contain vercel dev occurs!
  • This is caused by writing "dev": "vercel dev" inside the scripts of package.json / Reference here

Helpful URLs

• Vercel's handling of environment variables has become convenient