How can I keep my API secret out of my next.js deploy?

Question

I've built a small internal app using React and Next.js. I'm using an .env file per their instructions with my API key and secret.

My api/hello.js file does a simple

export default async (req, res) => {
  const data = await fetch(`https://api.trello.com/1/lists/abc123/cards?key=${process.env.KEY}&token=${process.env.TOKEN}`)

And yet when I build and deploy my app to production, inspect the JS files, and search "trello" in them, I'm able to see the key and secret right there.

Not quite sure what I'm doing incorrectly here. Would love some help. Thanks!

My next.config.js file:

module.exports = {
  env: {
    KEY: process.env.KEY,
    TOKEN: process.env.TOKEN
  },
}

Answer 1

Since Next.js 9.4 you can add .env file and add secrets there without third-party packages like dotenv .

next.config.js

require('dotenv').config();

// this code exposes your environment variables to the client-side. 
module.exports = {
  env: {
    KEY: process.env.KEY,
    TOKEN: process.env.TOKEN
  },
}

You're using the secret in API routes, so you don't need to expose them to client side. You can remove it:

module.exports = {
  env: {
    KEY: process.env.KEY,
    TOKEN: process.env.TOKEN
  },
}

To avoid exposing secrets, do not use the NEXT_PUBLIC_ prefix for them.

If you run next build you should not see .env variables in the output JS files.