How to pick up `.vercel` environment variables when running Next locally

Question

When using vercel env pull it places an env file in the .vercel folder. For example vercel env pull --environment=production will create .vercel/env.production.local.

I would like to run the next dev server or local production build so that it uses those env variables, but when running next dev or next start it seems to only pick up env files from the repository root.

How can I make those commands pick up the pulled files from the .vercel directory? Or where these env files not meant to be used like that?

Answer 1

When using vercel env pull with the --environment flag, it creates an .env.production.local file in the .vercel folder like you said. But by default, Next.js doesn't automatically get environment variables from that folder. To make Next.js pick up environment variables from the .vercel folder, you need to configure it to do so:

• Create a next.config.js in the root of your Next.js project
• Install the dotenv package if you haven't done so already: npm install dotenv --save-dev.
• Inside next.config.js, you use the dotenv package to load environment variables from the desired location.

Use the following code in your next.config.js file:

const path = require('path');

require('dotenv').config({ path: path.resolve(process.cwd(),'.vercel/env.production.local') });

You can then add your configurations in module.exports.