Deploy a Next.js App to Vercel

Deploy a Next.js app with an encrypted .env.vault file to Vercel.

Find a complete code example on GitHub for this guide.

Initial setup

Generate a next.js application.

npx create-next-app@latest --example hello-world .

This will create a handful of files.

ls -1
README.md
next-env.d.ts
node_modules
package-lock.json
package.json
pages
tsconfig.json

Edit pages/index.tsx to include process.env.NEXT_PUBLIC_HELLO.

pages/index.tsx

export default function IndexPage() {
  return (
    <div>
      Hello {process.env.NEXT_PUBLIC_HELLO}.
    </div>
  )
}

Add .vercelignore file.

.vercelignore

.env*
!.env.vault

Commit that to code and deploy to Vercel.

npx vercel@latest deploy --prod

yourapp.vercel.app

Once deployed, your app will say Hello . as it doesn't have a way to access the environment variable yet. Let's do that next.

Preload dotenv

Install dotenv.

npm install dotenv --save # Requires dotenv >= 16.1.0

Create a .env file in the root of your project.

.env

# .env
NEXT_PUBLIC_HELLO="World"

Preface your npm package.json scripts with dotenv preloading.

package.json

"scripts": {
  "dev": "node -r dotenv/config ./node_modules/.bin/next",
  "build": "node -r dotenv/config ./node_modules/.bin/next build",
  "start": "node -r dotenv/config ./node_modules/.bin/next start"
}

Try running it locally.

npm run dev
started server on 0.0.0.0:3000, url: http://localhost:3000

Visit localhost:3000

Perfect. process.env now has the keys and values you defined in your .env file.

That covers local development. Let's solve for production next.

Build .env.vault

Push your latest .env file changes and edit your production secrets. Learn more about syncing

npx dotenv-vault@latest push
npx dotenv-vault@latest open production

Use the UI to configure those secrets per environment.

dotenv.org

Then build your encrypted .env.vault file.

npx dotenv-vault@latest build

Its contents should look something like this.

.env.vault

#/-------------------.env.vault---------------------/
#/         cloud-agnostic vaulting standard         /
#/   [how it works](https://dotenv.org/env-vault)   /
#/--------------------------------------------------/

# development
DOTENV_VAULT_DEVELOPMENT="/HqNgQWsf6Oh6XB9pI/CGkdgCe6d4/vWZHgP50RRoDTzkzPQk/xOaQs="
DOTENV_VAULT_DEVELOPMENT_VERSION=2

# production
DOTENV_VAULT_PRODUCTION="x26PuIKQ/xZ5eKrYomKngM+dO/9v1vxhwslE/zjHdg3l+H6q6PheB5GVDVIbZg=="
DOTENV_VAULT_PRODUCTION_VERSION=2

Deploy

Commit those changes safely to code and redeploy to Vercel.

npx vercel@latest deploy --prod

That's it! On deploy, your .env.vault file will be decrypted and its production secrets injected as environment variables – just in time.