> ## Documentation Index
> Fetch the complete documentation index at: https://infisical.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Manage secrets for a Next.js app on Vercel

> Manage secrets for your Next.js and Vercel stack from local development to production.

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

* Infisical (you can use [Infisical Cloud](https://app.infisical.com) or a [self-hosted instance of Infisical](https://infisical.com/docs/self-hosting/overview.md)) to store your secrets.

## Project setup

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

### Create a project

1. Create a new project in [Infisical](https://app.infisical.com/).

2. Add a secret to the development environment of this project so we can pull it back for local development. Select the **Development** environment from the environment selector, then select **Add New** > **New Secret** 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 `infisical-nextjs`.

> [tab] JavaScript
>
> ```console theme={"dark"}
> npx create-next-app@latest --use-npm infisical-nextjs
> cd infisical-nextjs
> ```

> [tab] TypeScript
>
> ```console theme={"dark"}
> npx create-next-app@latest --ts --use-npm infisical-nextjs
> cd infisical-nextjs
> ```

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

> [tab] JavaScript
>
> ```js theme={"dark"}
> import '@/styles/globals.css'
>
> export default function App({ Component, pageProps }) {
>     console.log('Hello, ', process.env.NEXT_PUBLIC_NAME);
>     return <Component {...pageProps} />
> }
> ```

> [tab] TypeScript
>
> ```tsx theme={"dark"}
> 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} />
> }
> ```

## Infisical CLI for local development environment variables

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

### CLI installation

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

> [tab] MacOS
>
> Use [brew](https://brew.sh/) package manager
>
> ```console theme={"dark"}
> brew install infisical/get-cli/infisical
> ```

> [tab] Windows
>
> Use [Scoop](https://scoop.sh/) package manager
>
> ```console theme={"dark"}
> scoop bucket add org https://github.com/Infisical/scoop-infisical.git
> ```
>
> ```console theme={"dark"}
> scoop install infisical
> ```

> [tab] Alpine
>
> Install prerequisite
>
> ```console theme={"dark"}
> apk add --no-cache bash sudo wget
> ```
>
> Add Infisical repository
>
> ```console theme={"dark"}
> wget -qO- 'https://artifacts-cli.infisical.com/setup.apk.sh' | sudo sh
> ```
>
> Then install CLI
>
> ```console theme={"dark"}
> apk update && sudo apk add infisical
> ```

> [tab] RedHat/CentOs/Amazon
>
> Add Infisical repository
>
> ```console theme={"dark"}
> curl -1sLf \
> 'https://artifacts-cli.infisical.com/setup.rpm.sh' \
> | sudo -E bash
> ```
>
> Then install CLI
>
> ```console theme={"dark"}
> sudo yum install infisical
> ```

> [tab] Debian/Ubuntu
>
> Add Infisical repository
>
> ```console theme={"dark"}
> curl -1sLf \
> 'https://artifacts-cli.infisical.com/setup.deb.sh' \
> | sudo -E bash
> ```
>
> Then install CLI
>
> ```console theme={"dark"}
> sudo apt-get update && sudo apt-get install -y infisical
> ```

> [tab] Arch Linux
>
> Use the `yay` package manager to install from the [Arch User Repository](https://aur.archlinux.org/packages/infisical-bin)
>
> ```console theme={"dark"}
> yay -S infisical-bin
> ```

### Login

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

```console theme={"dark"}
infisical 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 Infisical platform and creates a `.infisical.yaml` file containing a reference to that latter project.

```console theme={"dark"}
infisical init
```

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

```console theme={"dark"}
infisical secrets-manager run -- npm run dev
```

If you open your browser console, **Hello, YOUR\_NAME** should be printed out.

Here, the CLI fetched the secret from Infisical 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](https://infisical.com/docs/cli/reference.md#secrets-manager-run--flag-env).

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

## Infisical-Vercel integration for production environment variables

Use our [Vercel Secret Syncs](https://infisical.com/docs/integrations/secret-syncs/vercel.md) guide to sync secrets from Infisical to Vercel as production environment variables.

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

> [!WARNING]
>
> The following environment variable names are reserved by Vercel and can't 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`.

## FAQ

> [accordion] Why should I use Infisical if I can centralize all my Next.js + Vercel environment variables across all environments directly in Vercel?
>
> Vercel doesn't 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 Infisical 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.

See also:

* [Documentation for the Infisical CLI](https://infisical.com/docs/cli/overview.md)
* [Documentation for the Vercel Secret Sync](https://infisical.com/docs/integrations/secret-syncs/vercel.md)


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.