Accessing secrets locally on Next.js/NOW for SSR and API routes

Question

Trying to use secrets locally with a Next.js/NOW-hosted site.

These are secrets I only want made available to SSR pages and API functions (not browser-rendered components).

Contrary to Zeit's documentation, the secrets only seem to work if they're stored in .env.build. If they're stored in .env they show up as undefined.

In other words, this works:

.env.build

SECRET_KEY="2039usdljkhfklsjdfjaops9dfi09"

now.json

{
  "build": {
    "env": {
      "SECRET_KEY": "@secret-key"
    }
  }
}

This does not:

.env

SECRET_KEY="2039usdljkhfklsjdfjaops9dfi09"

now.json

{
  "env": {
    "SECRET_KEY": "@secret-key"
  }
}

Am I missing something?

My fear is that secrets put into build will be "built" into the site, i.e., publicly available. Am I misunderstanding the word "build?"

Answer 1

My issue was fixed by logging into zeit.co, going to my app's project settings, and choosing Other for my Framework Preset. It has previously been set to Next.

After making that change my local environment variables began showing up in process.env when I ran now dev.

This seems to be a quirk of now 17.x. Downgrading to now 16.7.3 also fixed the issue. Hopefully this gets fixed soon!