kms/docs/documentation/guides/nextjs-vercel.mdx

---
title: "Next.js + Vercel"
---


This guide demonstrates how to use KMS to manage secrets for your Next.js + Vercel stack from local development to production. It uses:

- KMS (you can use [KMS Cloud](https://kms.hanzo.ai) or a [self-hosted instance of KMS](https://kms.hanzo.ai/docs/self-hosting/overview)) to store your secrets.

## Project Setup

To begin, we need to set up a project in KMS and add secrets to an environment in it.

### Create a project

1. Create a new project in [KMS](https://kms.hanzo.ai/).

2. Add a secret to the development environment of this project so we can pull it back for local development. In the **Secrets Overview** page, press **Explore Development** and add a secret with the key `NEXT_PUBLIC_NAME` and value `YOUR_NAME`.

3. Add a secret to the production environment of this project so we can sync it to Vercel. Switch to the **Production** environment and add a secret with the key `NEXT_PUBLIC_NAME` and value `ANOTHER_NAME`.

## Create a Next.js app

Initialize a new Node.js app.

We can use `create-next-app` to initialize an app called `kms-nextjs`.

<Tabs>
    <Tab title="JavaScript">
        ```console
        npx create-next-app@latest --use-npm kms-nextjs
        cd kms-nextjs
        ```
    </Tab>
    <Tab title="TypeScript">
        ```console
        npx create-next-app@latest --ts --use-npm kms-nextjs
        cd kms-nextjs
        ```
    </Tab>
</Tabs>

Next, inside `pages/_app.js`, lets add a `console.log()` to print out the environment variable in the browser console.

<Tabs>
    <Tab title="JavaScript">
    ```js
    import '@/styles/globals.css'

    export default function App({ Component, pageProps }) {
        console.log('Hello, ', process.env.NEXT_PUBLIC_NAME);
        return <Component {...pageProps} />
    }
    ```
    </Tab>
    <Tab title="TypeScript">
    ```tsx
    import '@/styles/globals.css'
    import type { AppProps } from 'next/app'

    export default function App({ Component, pageProps }: AppProps) {
        console.log('Hello, ', process.env.NEXT_PUBLIC_NAME);
        return <Component {...pageProps} />
    }
    ```
    </Tab>
</Tabs>

## KMS CLI for local development environment variables

We'll now use the KMS CLI to fetch secrets from KMS into your Next.js app for local development.

### CLI Installation

Follow the instructions for your operating system to install the KMS CLI.

<Tabs>
   <Tab title="MacOS">
  	Use [brew](https://brew.sh/) package manager

    	```console
    	$ brew install kms/get-cli/kms
    	```
   </Tab>
   <Tab title="Windows">
      Use [Scoop](https://scoop.sh/) package manager

        ```console
        $ scoop bucket add org https://github.com/KMS/scoop-kms.git
        ```

        ```console
        $ scoop install kms
        ```
   </Tab>
	 <Tab title="Alpine">
	 Install prerequisite
		```console
		$ apk add --no-cache bash sudo wget
		```

    	Add KMS repository
    	```console
    	$ wget -qO- 'https://artifacts-cli.kms.hanzo.ai/setup.apk.sh' | sudo sh
    	```

    	Then install CLI
    	```console
    	$ apk update && sudo apk add kms
    	```

   </Tab>
	 <Tab title="RedHat/CentOs/Amazon">
	 Add KMS repository
		```console
		$ curl -1sLf \
		'https://artifacts-cli.kms.hanzo.ai/setup.rpm.sh' \
		| sudo -E bash
		```

    	Then install CLI
    	```console
    	$ sudo yum install kms
    	```

   </Tab>
	 <Tab title="Debian/Ubuntu">
	 	Add KMS repository

		```console
		$ curl -1sLf \
		'https://artifacts-cli.kms.hanzo.ai/setup.deb.sh' \
		| sudo -E bash
		```

    	Then install CLI
    	```console
    	$ sudo apt-get update && sudo apt-get install -y kms
    	```

   </Tab>
	<Tab title="Arch Linux">
		Use the `yay` package manager to install from the [Arch User Repository](https://aur.archlinux.org/packages/kms-bin)

		```console
		$ yay -S kms-bin
		```

   </Tab>
</Tabs>

### Login

Authenticate the CLI with the KMS platform using your email and password.

```console
$ hanzo-kms login
```

### Initialization

Run the `init` command at the root of the Next.js app. This step connects your local project to the project on the KMS platform and creates a `kms.json` file containing a reference to that latter project.

```console
$ hanzo-kms init
```

### Start the Next.js app with secrets injected as environment variables

```console
$ hanzo-kms run -- npm run dev
```

If you open your browser console, **Hello, YOUR_NAME** should be printed out.

Here, the CLI fetched the secret from KMS and injected it into the Next.js app upon starting up. By default,
the CLI fetches secrets from the development environment which has the slug `dev`; you can inject secrets from different
environments by modifying the `env` flag as per the [CLI documentation](/cli/usage).

At this stage, you know how to use the KMS CLI to inject secrets into your Next.js app for local development.

## KMS-Vercel integration for production environment variables

Use our [Vercel Secret Syncs](../../integrations/secret-syncs/vercel) guide to sync secrets from KMS to Vercel as production environment variables.

At this stage, you know how to use the KMS-Vercel integration to sync production secrets from KMS to Vercel.

<Warning>
  The following environment variable names are reserved by Vercel and cannot be
  synced: `AWS_SECRET_KEY`, `AWS_EXECUTION_ENV`, `AWS_LAMBDA_LOG_GROUP_NAME`,
  `AWS_LAMBDA_LOG_STREAM_NAME`, `AWS_LAMBDA_FUNCTION_NAME`,
  `AWS_LAMBDA_FUNCTION_MEMORY_SIZE`, `AWS_LAMBDA_FUNCTION_VERSION`,
  `NOW_REGION`, `TZ`, `LAMBDA_TASK_ROOT`, `LAMBDA_RUNTIME_DIR`,
  `AWS_ACCESS_KEY_ID`, `AWS_SECRET_ACCESS_KEY`, `AWS_SESSION_TOKEN`,
  `AWS_REGION`, and `AWS_DEFAULT_REGION`.
</Warning>

## FAQ

<AccordionGroup>
    <Accordion title="Why should I use KMS if I can centralize all my Next.js + Vercel environment variables across all environments directly in Vercel?">
        Vercel does not specialize in secret management which means it lacks many useful features for effectively managing environment variables.
        Here are some features that teams benefit from by using KMS together with Vercel:

        - Audit logs: See which team members are creating, reading, updating, and deleting environment variables across all environments.
        - Versioning and point in time recovery: Rolling back secrets and an entire project state.
        - Overriding secrets that should be unique amongst team members.

        And much more.
    </Accordion>
    <Accordion title="Is opting out of end-to-end encryption for the KMS-Vercel integration safe?">
        Yes. Your secrets are still encrypted at rest. To note, most secret managers actually don't support end-to-end encryption.

        Check out the [security guide](/internals/security).
    </Accordion>
</AccordionGroup>

See also:

- [Documentation for the KMS CLI](/cli/overview)
- [Documentation for the Vercel Secret Sync](../../integrations/secret-syncs/vercel)