Set up Keyshade with Next.js

Keyshade is a drop-in replacement for .env files that manages your secrets and environment variables securely, without needing to commit anything sensitive to your repo.

This guide walks you through integrating Keyshade into your Next.js app step by step.

Prefer to dive straight into code? Jump to Running Your App

Coming Up

Here’s what this guide covers:

• Create a Next.js app

• Install the Keyshade CLI

• Set up a profile using your API key

• Create a project and environment in the Keyshade dashboard

• Add secrets and runtime variables

• Link your local project with keyshade init

• Run your app with keyshade run

• Use process.env to access values in both frontend and backend code

💡 If you're not familiar with how Keyshade works, we recommend starting with What is Keyshade?

Create a Next.js Project

If you don't already have a Next.js app, create one using the official CLI:

npx create-next-app <your-app-name>

Need more options or want to understand what this command does? Check out the official Next.js documentation.

Install the Keyshade CLI

The Keyshade CLI lets you fetch secrets, inject env variables, and manage profiles all from your terminal.

Install it globally:

npm install -g @keyshade/cli

Note: Node.js v24 may cause issues with the Keyshade CLI, so use v20 (LTS) for best compatibility.

See Installing the CLI for more info.

Set Up Your Profile

To connect your local environment with Keyshade, create or use a profile.

If this is your first time using Keyshade, follow this guide to set up your profile.

If you've already used Keyshade before:

keyshade profile use <your-profile-name>

You can verify which profile is active with:

keyshade workspace list

Create a Project and Add Secrets

To get started:

1. Go to the Keyshade Dashboard

2. Click “Create Project”

3. Name your project (e.g. nextjs-app)

4. Inside the project, click the “Secrets” tab

5. Add your secrets (e.g. NEXT_PUBLIC_API_URL)

6. Add your variables (e.g. PORT)

💡 Secrets vs Variables:

• Secrets are sensitive credentials like API keys or tokens. These are encrypted.

• Variables are non-sensitive configs like ports, flags, or feature toggles. These are stored as-is and are not encrypted.

When adding frontend-exposed values, prefix them with NEXT_PUBLIC_.

See Next.js docs for details.

Need help with projects and secrets? See Managing Secrets & Variables

Initialize Keyshade in Your Project

In order to use the configurations you just created on the dashboard, you would need to initialize keyshade in your project. This generates the necessary configurations for the CLI to tap into your keyshade project.

From your project root:

cd <your-app-name>

Run the init command to link your local project with the Keyshade dashboard:

keyshade init

You'll be guided through selecting your workspace, project, and environment.

Want to skip the prompts?

keyshade init --workspace-slug <my-workspace> --project-slug <my-project> --environment-slug <my-environment> --private-key <my-private-key>

This will generate a keyshade.json file in your project root.

More on this in the CLI Reference

Run Your App with Secure Env Injection

Start your dev server with Keyshade:

keyshade run -- npm run dev

Example output:

Keyshade will inject your secrets and variables securely at runtime.

Access Secrets and Variables in Your Code

Once your app is running with keyshade run, use process.env to access any injected values — no extra setup needed.

For example, if you added a secret named or NEXT_PUBLIC_API_URL and a variable named PORT in the Keyshade dashboard:

// Server-side
const port = process.env.PORT;
  
// Client-side
const  apiUrl = process.env.NEXT_PUBLIC_API_URL;

Server-side example

You can access PORT inside an API route (say app/api/hello/route.ts) like this:

Now, visit http://localhost:3000/api/hello to confirm the port is being read from your Keyshade secret.

Client-side example

Use NEXT_PUBLIC_API_URL in your React components at app/page.tsx

Now, visit http://localhost:3000 to see the public API URL rendered in the browser.

You're All Set 🎊

Your Next.js app is now securely powered by Keyshade — no .env files, no leaking secrets, and no environment mismatches.