Share Vercel Flags Across Apps

Connect two Vercel apps so one can read and react to another app's flag.

Introduction

30 Second Summary

A shared feature can become a coordination problem when two apps need the same switch. Copying a secret between projects adds another credential to protect.

In this project, you will deploy two Next.js apps on Vercel. You will use Vercel Flags to connect one app to a feature flag owned by the other.

What You'll Build

At the finish, flipping new-checkout in the source project changes the message on the consumer's live page without a redeploy.

By the end of this project, you'll have:

  • Two live URLs that show each app running on Vercel.
  • A remote feature switch that changes the consumer page as soon as you turn new-checkout on.
  • A safe fallback that restores the default checkout message after you revoke the connection. The consumer keeps running without a shared SDK key.
  • Secret Mission: An optional challenge to push your skills further.

Are there any prerequisites?

You'll need a free Vercel account. You'll also need Node plus basic familiarity with a Next.js app.

Before We Start

A shared feature flag needs one app to own it. A separate app needs permission to read it.

You will prepare two undeployed Next.js starter projects. You will also confirm access to the Vercel dashboard before either project goes live.

In this step, get ready to:
  • Confirm that Node.js meets the minimum version required by Next.js.
  • Sign in to your Vercel account through a browser.
  • Create separate source and consumer starter projects on your Desktop.
Check your Node.js version

Node.js runs the tools that create each starter project. The current Next.js setup requires Node.js 20.9 or newer.

  • Press Cmd+Space on macOS or the Windows key on Windows to open system search.
  • Type Terminal on macOS or PowerShell on Windows.
  • Press Enter to open the terminal app.
  • Check your installed Node.js version by running this command:
node --version

What does this command do?

The command prints the Node.js version currently available to your terminal. That result determines whether your machine can create the two Next.js projects.

✔️ I see version 20.9 or higher

Your installed Node.js version meets the Next.js requirement. Keep this terminal open for the starter project commands.

ⓧ I see an older version

Your installed version is below the Next.js minimum. The official Node.js installer updates the runtime and includes npm.

  • Visit the official Node.js download page in your browser.
  • Download the LTS installer for your operating system.
  • Run the installer using its default options.
  • Approve the operating system permission request if one appears.
  • Close your terminal after the installation completes.
  • Reopen Terminal on macOS or PowerShell on Windows through system search.
  • Check the updated version by running this command:
node --version

What should I see?

The new result should report Node.js 20.9 or higher. A fresh terminal session loads the updated installation path.

ⓧ Command not found

Your terminal cannot find a Node.js installation. The official installer adds Node.js and npm to your machine.

  • Visit the official Node.js download page in your browser.
  • Download the LTS installer for your operating system.
  • Run the installer using its default options.
  • Approve the operating system permission request if one appears.
  • Close your terminal after the installation completes.
  • Reopen Terminal on macOS or PowerShell on Windows through system search.
  • Verify the installation by running this command:
node --version

What should I see?

The command should now report a Node.js version. Confirm that the version is 20.9 or higher before continuing.

Still seeing an unsupported version?

  • Close every terminal window before opening a fresh session.
  • Confirm that you installed the LTS release from the official Node.js download page.
  • Restart your computer if the terminal continues to use the previous installation path.

Help me fix my Node.js version check.

Sign in to Vercel

The Vercel dashboard is where you will deploy both apps. It also gives the source project ownership of the flag you create later.

  • Choose the account path below that matches your current situation.

✔️ I have a Vercel account

  • Visit the official Vercel login page in your browser.
  • Select the login method connected to your Vercel account.
  • Complete the authentication prompt from your selected method.

You should land on the Vercel dashboard after authentication succeeds.

ⓧ I need a Vercel account

A Vercel account stores the two projects and their connection. Email signup uses a one-time password instead of a permanent password.

  • Visit the official Vercel signup page in your browser.
  • Select Continue with Email.
  • Enter your email address in the signup form.
  • Retrieve the one-time password from your email inbox.
  • Enter the one-time password on the Vercel page.

You should land on the Vercel dashboard when the account is ready.

  • Confirm dashboard access by finding your profile picture near the top-right of the page.
  • Keep the dashboard open in this browser tab.

That access check is complete. Your browser is ready to manage both deployments when the build begins.

Cannot reach the dashboard?

  • Return to the Vercel login page if authentication sends you back to the homepage.
  • Use the same login method that originally created your account.
  • Request a fresh one-time password if the previous email code expired.

Help me access my Vercel dashboard.

Create two Next.js starter projects

Each generated folder contains a complete starter project. The names source-app and consumer-app keep the two flag roles clear.

  • Switch back to the terminal from the Node.js version check.
  • Move to your Desktop by running this command:
cd ~/Desktop

What does this command do?

This command moves the terminal into your Desktop folder. Both starter projects will appear there as separate folders.

The first project setup can take a few minutes while npm downloads the required packages. The command may also ask for permission to download the project creator before showing its setup prompts.

  • Approve the temporary package download if your terminal requests permission.
  • Enter source-app when the project name prompt appears.
  • Select Yes, use recommended defaults when the defaults prompt appears.
  • Create the source starter project by running this command:
npx create-next-app@latest

What does this command do?

The command launches the official Next.js project creator. Your prompt choices create the source-app folder with the default starter files and installed dependencies.

Good. The source-app folder now holds the undeployed app that will own the feature flag.

Source project creation stopped?

  • Confirm that your terminal still reports Node.js 20.9 or higher.
  • Check your internet connection if the dependency download stalls.
  • Remove an incomplete source-app folder before retrying the project creator.

Help me create the source starter project.

The second starter uses the same defaults. Its separate folder becomes the app that reads the source project's flag.

  • Approve the temporary package download if your terminal requests permission again.
  • Enter consumer-app when the project name prompt appears.
  • Select Yes, use recommended defaults when the defaults prompt appears.
  • Create the consumer starter project by running this command:
npx create-next-app@latest

What does this command do?

The project creator now makes the separate consumer-app folder. This starter will display the flag-controlled checkout message later.

The consumer-app folder now holds the second undeployed starter project. Both sides of the connection are available locally.

Consumer project creation stopped?

  • Confirm that the first project finished before starting the second command.
  • Check your internet connection if the dependency download stalls.
  • Remove an incomplete consumer-app folder before retrying the project creator.

Help me create the consumer starter project.

Before you check, do you expect both starter folders to contain the same basic project structure?

  • Press Cmd+Space on macOS or the Windows key on Windows to open system search.
  • Type Finder on macOS or File Explorer on Windows.
  • Press Enter to open the file browser.
  • Select the Desktop location in the sidebar.
  • Confirm that source-app appears as a folder.
  • Confirm that consumer-app appears as a separate folder.
  • Open source-app to confirm that it contains package.json.
  • Open consumer-app to confirm that it also contains package.json.

You should see two separate Next.js starter projects on your Desktop. Both projects remain undeployed at this checkpoint.

Missing one of the starter folders?

  • Return to the terminal from earlier.
  • Check the project name you entered during the corresponding setup prompt.
  • Rerun the project creator for the missing folder.

Help me find my Next.js starter folders.

Your dashboard access and two starter projects are ready. Next, you will deploy the source app and create its new-checkout flag.

Deploy the Source App and Create a Flag

The checkout decision needs one deployed owner before another app can read it. The source app becomes that control point.

In this step, you will deploy the source Next.js app to Vercel. You will use Vercel Flags to create the Boolean feature flag named new-checkout with a starting value of false.

In this step, get ready to:
  • Deploy the source app as a Vercel project.
  • Confirm the source app loads at its production URL.
  • Create the new-checkout Boolean flag with false values.
Deploy the source app

Vercel imports your Git repository. It detects the Next.js framework before choosing build settings.

If your Git provider is not connected yet, the provider can show an authorization screen before its repositories appear.

  • In the Vercel dashboard from earlier, select the team that should own both projects.
  • Click Create New in the top-right corner.
  • Select Project.

If the Repository Is Local

The dashboard import flow needs a repository that your Git provider can access. A source app stored only on your computer must be published first.

  • Publish the local source app through your Git provider's existing-repository workflow.
  • Return to the Vercel project creation page after the repository appears in your provider.

Finding the correct repository can be fiddly when the source app has a similar name to the consumer app.

  • Choose the Git provider that contains your source app repository.
  • Approve repository access if your Git provider requests authorization.
  • Find the source app under Import Git Repository.
  • Click Import beside the source app repository.

Vercel should detect Next.js as the framework. The detected settings tell Vercel how to build the repository.

The first build can take a couple of minutes while Vercel installs the app's dependencies.

  • Confirm that Framework Preset shows Next.js.
  • Keep the detected build settings.
  • Click Deploy.

When the build finishes, you will see a Ready status with a production URL.

That is the first anchor in place: your source app is now reachable through a live deployment.

Deployment Not Reaching Ready?

  • Open Build Logs on the deployment page to find the first reported build problem.
  • Confirm that you imported the source app repository.
  • Confirm that Framework Preset is set to Next.js.

Help me diagnose this deployment. You can also search the Vercel Community Help forum.

Confirm the live deployment

The production URL proves that Vercel can serve the source app outside your local machine. You will reuse this deployment throughout the project.

  • Copy the Production URL from the deployment summary.
  • Open the copied URL in a new browser tab.

You will see the source app homepage load at its live Vercel URL.

  • Record the live URL here: your source deployment URL.

Live Page Not Loading?

  • Return to the deployment summary to confirm that its status is Ready.
  • Copy the Production URL again to avoid using a build log or dashboard URL.

Help me check my live deployment.

Create the new-checkout flag

A Boolean flag has two possible values. Starting at false keeps the new checkout disabled until you deliberately turn it on.

  • Switch back to the source Vercel project from earlier.
  • Select Flags in the project sidebar.
  • Click Create Flag.
  • Enter new-checkout in the Slug field.
  • Select Boolean under Type.
  • Set Development to false.
  • Confirm that Preview shows false.
  • Confirm that Production shows false.

Why Set Every Environment to False?

Boolean flags start at true in Development. They start at false in Preview and Production.

Using false everywhere creates one clear baseline for the access test later.

  • Use the form's confirmation control to create the flag.
  • Predict the slug, type, and environment values you expect the dashboard to show.
  • Return to the Flags tab after the creation form closes.
  • Locate new-checkout in the flags overview.

You will see new-checkout listed as a Boolean flag. Its environment values will show false.

You now have a live source project with a checkout control that starts safely switched off.

Flag Missing From the Dashboard?

  • Confirm that you are viewing the source project.
  • Select Vercel Flags in the Flags area to show flags owned by Vercel.
  • Check that your project role is Project Administrator or Developer if Create Flag is unavailable.

Help me find or create the flag. You can also ask in the Vercel Community Help forum.

Your source app is live with its checkout flag in place. Next, you will deploy the consumer with its safe default message.

Deploy the Consumer App

Your source project now owns the new-checkout feature flag. A separate consumer gives you a clean baseline for testing cross-project access later.

First, you will give the consumer a fallback message. You will then publish it as a separate Next.js project on Vercel.

In this step, get ready to:
  • Set the default checkout message on the consumer homepage.
  • Deploy the consumer repository as a separate Vercel project.
  • Verify the default message at the live deployment URL.
Prepare the default checkout message

Before the consumer can read a remote flag, it needs a safe default. The old-checkout message makes that fallback visible.

  • In your usual code editor or your Git provider's web editor, update the existing component for the / homepage so its rendered message reads Old checkout experience.
  • Commit the homepage change to the connected consumer repository.

Why start with a fallback?

The page currently contains only the fallback message. This gives you a control result before any source-flag integration exists.

Later, a changed message proves that the consumer successfully read the source project's flag.

Deploy the consumer project

A Vercel project is the deployment boundary for one app. Keeping the consumer separate makes the cross-project test meaningful.

  • Return to the Vercel dashboard from earlier.
  • Click Create New.

You'll see the available project creation options.

  • Select Project.
  • Choose the consumer repository from your connected Git provider.

Vercel opens the configuration page. You'll see Next.js in the Framework Preset field.

  • Confirm that Framework Preset shows Next.js.
  • Keep the Environment Variables section unchanged.

Expect the first build to take a few minutes while Vercel compiles the app.

  • Start the production deployment by clicking Deploy.

When the build completes, you'll see the latest production deployment on the Project Overview page.

Your consumer repository now runs as its own live Vercel project.

  • Record the generated Production URL here: your consumer deployment URL.

Deployment not ready?

  • Confirm that the selected repository is the consumer repository.
  • Check that Framework Preset shows Next.js.
  • Open the deployment log to find the first failing build step.

Help me troubleshoot this consumer deployment.

Verify the live baseline

The live page is your proof that the consumer works independently. The source flag remains false.

Before you open the live URL, predict which checkout experience appears.

  • Open your consumer deployment URL in a browser tab.

You'll see Old checkout experience on the live page.

That's your baseline locked in. The consumer has no source-flag integration yet.

Seeing a different page?

  • Confirm that the connected consumer repository contains the exact Old checkout experience message.
  • Return to the consumer project's Deployments page.
  • Redeploy the latest commit that contains the homepage change.

Help me fix the consumer page output.

Your consumer now has a live fallback to build on. Next, you'll create the project connection that lets it access the source project's flags.

Connect the Consumer Project

Your two Vercel deployments are live. The consumer proves its fallback works because its page shows Old checkout experience.

The source project still has no reason to trust that consumer. This step adds a Project Connection that grants read access without an SDK key.

In this step, get ready to:
  • Return to the source project's Flags area.
  • Authorize the Consumer Vercel Project to read the source project's flags.
  • Verify the new access boundary from both projects.
Return to the source project

The source project owns new-checkout. Its Connections page controls which other projects can read that flag.

  • Return to the Vercel dashboard from earlier.
  • Select the Source Vercel Project from your project list.
  • Select Flags in the project sidebar.
  • Select Connections.

You'll see separate sections for projects that can read this project's flags and projects whose flags this project can read.

Create the project connection

A connection is a read-only authorization between projects in the same Vercel team. The source project remains the owner of its flags.

  • Find the flags can be read by section.
  • Select New Connection.
  • Select the Consumer Vercel Project from the project list.

That access boundary is sorted: the source now recognizes your consumer as an approved reader.

What Access Did You Grant?

The connection grants the consumer read and evaluate access to every flag in the source project across all environments. Access cannot be limited to only new-checkout.

The consumer uses its deployment identity instead of a copied SDK key. Its page still needs an adapter before it can evaluate the source flag.

Can't Find the Consumer Project?

  • Confirm that the source project and consumer project belong to the same Vercel team.
  • Confirm that you can view the Consumer Vercel Project.
  • Ask a team Member or Owner to create the connection if your source-project role does not allow it.

Need help finding or connecting the consumer project? Visit the Vercel Community for project-specific support.

Verify the connection boundary

The connection should now be visible from the source project. The consumer page should keep using its fallback until you add the flag adapter.

Before you check, predict whether the new permission alone changes the consumer's checkout message.

  • Refresh the Connections page.
  • Look under flags can be read by.

You'll see the Consumer Vercel Project listed there. This confirms that the source project has authorized it to read source-owned flags.

  • Return to the live consumer deployment URL from earlier.
  • Refresh the consumer page.

You'll still see Old checkout experience. The connection grants permission without changing the consumer's code or deployment.

The trust path between your projects is live. Next, you'll teach the consumer to evaluate new-checkout through this connection.

Add the Connected Flag Adapter

The source-to-consumer connection now grants permission. The consumer's deployed code still returns a fixed checkout message.

In this step, you will add an adapter that evaluates new-checkout through Vercel Flags. You will keep false as the fallback value before redeploying the consumer.

In this step, get ready to:
  • Prepare the consumer with the source project ID.
  • Evaluate the source flag with a false fallback.
  • Redeploy the consumer without an SDK key.
Record the source project ID

A Vercel project ID is the permanent address the adapter uses to find the source project. It begins with prj_.

  • Switch back to the Source Vercel Project in the dashboard.
  • Select Settings in the project sidebar.
  • Select General in the settings sidebar.
  • Scroll to the Project ID section.
  • Copy the ID into your source Vercel project ID.
  • Return to the consumer app repository from earlier in your code editor.
  • Open an integrated terminal for the consumer app repository.
  • Install both required packages by running:
npm i flags @flags-sdk/vercel

What does this command install?

  • The flags package provides flag() for server-side evaluation in Next.js.
  • The @flags-sdk/vercel package provides the adapter that communicates with Vercel Flags.
  • Project Connections require @flags-sdk/vercel version 1.6.0 or later.
  • Confirm the installation finishes without reporting a failed dependency.
  • Confirm package.json now lists flags.
  • Confirm package.json now lists @flags-sdk/vercel.

Package installation failed?

  • Check that the terminal is inside the consumer app repository containing package.json.
  • Confirm your internet connection before running the installation again.

Help me troubleshoot the Flags SDK installation.

Configure the connected flag

The connected adapter targets the source project while the existing connection controls access. The flag definition uses false whenever the source value cannot be read.

  • Create flags.ts beside package.json in the consumer app repository by pasting this code:
import { flag } from 'flags/next';
import { createVercelAdapter } from '@flags-sdk/vercel';

// Build an adapter that reads flags from the connected source project.
const sharedFlagsAdapter = createVercelAdapter({
  projectId: '[[SOURCE_PROJECT_ID="your source Vercel project ID"]]',
});

// Keep the existing checkout available if the flag cannot be read.
export const newCheckout = flag<boolean>({
  key: 'new-checkout',
  defaultValue: false,
  adapter: sharedFlagsAdapter(),
});

What does this flag definition do?

  • The sharedFlagsAdapter targets the Source Vercel Project using its project ID.
  • The newCheckout function evaluates the source flag named new-checkout.
  • The defaultValue keeps the old checkout active if evaluation is unavailable.
  • The adapter uses the consumer deployment's identity instead of a copied SDK key.
  • Save flags.ts.
  • Confirm the editor's file explorer lists flags.ts beside package.json.

Seeing errors in flags.ts?

  • Check that both package names appear in package.json.
  • Check that the project ID in flags.ts starts with prj_.
  • Check that the flag key contains the hyphen in new-checkout.

Help me fix my connected flag definition.

✔️ Awesome, I've got everything!

Your saved flags.ts now points to the connected source project.

ⓧ I'd like to double check the full code

import { flag } from 'flags/next';
import { createVercelAdapter } from '@flags-sdk/vercel';

// Build an adapter that reads flags from the connected source project.
const sharedFlagsAdapter = createVercelAdapter({
  projectId: '[[SOURCE_PROJECT_ID="your source Vercel project ID"]]',
});

// Keep the existing checkout available if the flag cannot be read.
export const newCheckout = flag<boolean>({
  key: 'new-checkout',
  defaultValue: false,
  adapter: sharedFlagsAdapter(),
});
Deploy and verify the consumer

The consumer page must call newCheckout() during server rendering. The resolved boolean selects the checkout message before the browser receives the page.

  • Replace the contents of app/page.tsx in the consumer app repository with this code:
import { newCheckout } from '../flags';

export default async function Page() {
  // Hold the shared flag value for this request.
  const isNewCheckout = await newCheckout();

  // Render the checkout message that matches the resolved flag.
  return (
    <main>
      <h1>
        {isNewCheckout
          ? 'New checkout experience'
          : 'Old checkout experience'}
      </h1>
    </main>
  );
}

How does the page use the flag?

  • The page awaits newCheckout() on the server.
  • The isNewCheckout variable holds the boolean result for this request.
  • A true result selects the new checkout message.
  • A false result preserves Old checkout experience.
  • Save app/page.tsx.
  • Confirm the editor shows no error marker beside app/page.tsx.

Seeing an import error?

  • Check that flags.ts sits beside package.json.
  • Check that the import uses ../flags from app/page.tsx.
  • Check that newCheckout uses the same capitalization in both files.

Help me diagnose my page import error.

✔️ Awesome, I've got everything!

Your consumer page now chooses its message from the connected flag value.

ⓧ I'd like to double check the full code

import { newCheckout } from '../flags';

export default async function Page() {
  // Hold the shared flag value for this request.
  const isNewCheckout = await newCheckout();

  // Render the checkout message that matches the resolved flag.
  return (
    <main>
      <h1>
        {isNewCheckout
          ? 'New checkout experience'
          : 'Old checkout experience'}
      </h1>
    </main>
  );
}

The consumer project already deploys from Git. A push to its production branch gives Vercel the updated files.

  • Publish the updated consumer source to its connected Git repository by running these commands:
git add .
git commit -m "Add connected flag adapter"
git push

What do these commands do?

  • The first command stages the updated project files.
  • The second command records those changes in a commit.
  • The third command sends the commit to the connected repository.

The deployment usually takes a minute or two while Vercel installs the packages and builds the consumer app.

  • Return to the Consumer Vercel Project's Deployments page.
  • Wait for the newest production deployment to show a successful status.

The successful deployment confirms that the connected adapter builds inside the consumer project.

Deployment did not succeed?

  • Confirm the commit was pushed to the branch connected to the Production environment.
  • Open the failed deployment's Build Logs to find the first reported error.
  • Compare both files with the full-code tabs above.

Help me troubleshoot the failed Vercel deployment.

Before you refresh the live page, which checkout message do you expect while the source flag remains false?

  • Open the live URL for the newest production deployment.
  • Refresh the consumer page.

You will still see Old checkout experience. The adapter reached the source flag and received its current false value.

  • Return to the Consumer Vercel Project in the dashboard.
  • Select Settings in the project sidebar.
  • Select Environment Variables in the settings sidebar.
  • Check the list for an environment variable named exactly FLAGS.

You should see no SDK key entry named exactly FLAGS. The consumer uses its deployment identity instead.

Why is there no SDK key?

Connected deployments authenticate with an OpenID Connect (OIDC) identity. The source project ID tells the adapter which flag store to read.

The connection remains the access control. This keeps copied SDK credentials out of the consumer settings.

You have the connected adapter live in production. The consumer can now read the source flag without storing a shared SDK key.

The consumer is ready to react to the shared flag. Next, you will change the source value and watch the live page update without another deployment.

Turn On the New Checkout

Your consumer now reads the new-checkout flag from Vercel Flags through its active connection.

Central control lets the source project change the consumer without editing its code. In this step, you will test that control without redeploying the consumer.

In this step, get ready to:
  • Turn on the source project's new-checkout flag.
  • Refresh the consumer's live URL without redeploying it.
  • Confirm the consumer shows the new checkout message.
Turn on the source flag

A boolean feature flag can resolve to true or false. Changing the source value to true enables the new checkout for authorized consumers.

  • Return to the Vercel dashboard from earlier.
  • Select the source Vercel project.
  • Select the Flags tab.
  • Find new-checkout in the flag list.
  • Turn on the flag's boolean control.
  • Confirm the current value shows true.

That central switch is now live. The source project now serves the enabled value to its authorized consumer.

What changed?

Only the source flag's value changed. The consumer deployment remains untouched.

The active connection lets the consumer read the updated value when it evaluates new-checkout.

Refresh the consumer without redeploying

The consumer's live page provides the clearest proof of centralized control. A refresh gives the deployed page another chance to evaluate the connected flag.

Before you refresh, do you expect the page to keep the old message or show the new one?

  • Switch back to the consumer live URL from earlier.
  • Refresh the page using your browser's reload control.

You'll see New checkout experience. That is the project's key proof: one source flag changed a different deployed app without a consumer redeploy.

Still seeing the old message?

  • Return to the source project's Flags tab.
  • Confirm new-checkout still shows true.
  • Confirm the source-to-consumer connection remains active.
  • Refresh the consumer live URL again.

Help me troubleshoot why the consumer still shows the old checkout message.

The consumer used its deployment identity through the connection. No copied SDK key was needed.

Your source flag now controls a feature in a different deployed app. Next, you'll test the fallback by removing the consumer's access.

Remove Access and Verify the Fallback

The consumer currently shows New checkout experience because it can read the source project's new-checkout flag. This final safety test checks what happens when that permission disappears.

A Vercel Project Connection uses the consumer deployment's identity to grant cross-project access. Removing that permission tests whether the configured fallback keeps the page usable.

In this step, get ready to:
  • Confirm the consumer currently displays the connected flag result.
  • Remove the consumer's access from the source project's Connections page.
  • Refresh the existing deployment to verify the false fallback.
Confirm the connected result

A baseline makes the access change visible. The active connection should still let the consumer resolve the source flag's true value.

  • Switch back to the consumer live URL from earlier.
  • Refresh the page.

You'll see New checkout experience. This confirms the existing deployment can still read the source flag before you revoke access.

Remove the project connection

Removing access can feel destructive. This action deletes only the authorization between the two projects.

  • Return to the Vercel dashboard from earlier.
  • Select the source project.
  • Select Flags in the project sidebar.
  • Select Connections.
  • Locate the consumer project under flags can be read by.
  • Open the connection's menu.
  • Select Remove Connection.
  • Complete the confirmation prompt.

You've closed the cross-project access path. The consumer project no longer appears under flags can be read by.

The source flag remains in place. Both deployments also remain available.

Still See the Consumer Connection?

  • Confirm the source project is selected in the Vercel dashboard.
  • Refresh the Connections page.
  • Open the connection's menu again if the consumer still appears.

Need help removing the connection?

Verify the fallback without redeploying

The consumer still has the same deployed code with a fallback value of false. Refreshing its existing live URL tests whether revoked access takes effect independently of a deployment.

  • Predict which checkout message appears when the source flag stays true but the consumer cannot read it.
  • Switch back to the consumer live URL from earlier.
  • Refresh the page.

You've proved the fallback path. The existing deployment now shows Old checkout experience with no redeploy.

Still See the New Checkout Message?

  • Return to the source project's Connections page.
  • Confirm the consumer no longer appears under flags can be read by.
  • Refresh the existing consumer live URL again.

Get help tracing the remaining access path.

  • Switch back to the Vercel dashboard.
  • Return to the source project.
  • Select Flags in the project sidebar.
  • Locate the new-checkout flag.

The source flag still shows true. This isolates the change to the removed permission.

Why Does the Page Still Work?

  • The connection authorized the consumer to evaluate the source project's flags.
  • Removing the connection prevents the adapter from resolving the current true value.
  • The configured fallback supplies false when the remote flag cannot be evaluated.
  • The page maps false to Old checkout experience.

Secret mission

Run a Connection Recovery Drill

Can you restore shared flag access during an incident without adding a key or redeploying? Reconnect the consumer to prove its live page recovers. Revoke access again to leave the safe fallback in place.

Clean Up Your Resources

Clean Up Your Resources

Decide whether to keep your deployments available, pause cross-project access to come back later, or delete both Vercel projects entirely. The main project path remains at $0 within Vercel's included allowance.

Resources you used:

  • The Source Vercel Project, including its deployment and its new-checkout feature flag.
  • The Consumer Vercel Project, including its deployment and Vercel Flags adapter configuration.

Keep everything running

No action is needed. This option keeps both live deployments available as a reference.

  • Keep the source project's new-checkout flag set to true.
  • Leave the source-to-consumer connection removed.
  • Keep both Vercel projects deployed for future experiments.

The consumer live URL continues to show Old checkout experience because its fallback remains active.

Pause - I'll come back to this later

There is no local process to stop. The removed connection already pauses cross-project flag access.

  • Leave both Vercel projects deployed.
  • Keep the source-to-consumer connection removed.
  • Return to the source project's Connections page when you are ready to resume.
  • Recreate the connection that authorizes the Consumer Vercel Project.
  • Refresh the consumer live URL.

You should see New checkout experience again without redeploying the consumer.

Delete - I don't want to use this again

Deleting both projects can feel final. Both app repositories remain available locally or through your connected Git provider.

  • Switch back to the Vercel dashboard from earlier.
  • Select the Consumer Vercel Project.
  • Select Settings in the project navigation.
  • Select General in the project settings.
  • Scroll to the Delete Project section.

A confirmation prompt appears before deletion. This extra check helps prevent an accidental removal.

  • Click Delete Project.
  • Complete the on-screen confirmation prompt.
  • Return to the dashboard's project list.

That is one deployment cleaned up. You should no longer see the Consumer Vercel Project in the project list.

  • Select the Source Vercel Project.
  • Select Settings in the project navigation.
  • Select General in the project settings.
  • Scroll to the Delete Project section.

The source project also owns the new-checkout flag. Deleting this project removes both its deployment and that flag.

  • Click Delete Project.
  • Complete the on-screen confirmation prompt.
  • Return to the dashboard's project list.

Cleanup complete. You should no longer see either Vercel project in the project list.

Nice Work!

Nice Work!

Great job! You deployed two Next.js apps that share feature control through Vercel without a copied SDK key.

You've learned how to:

  • Deploy a source app and consumer app as separate Vercel projects. You can verify their behaviour through their live deployment URLs.
  • Grant keyless flag access through Project Connections. The consumer reads the source project's Vercel Flags configuration through its deployment identity.
  • Prove live feature control when the consumer's checkout message changes without a redeploy. You also confirmed that removing the connection safely restores the false fallback.
  • Secret Mission: Complete an optional challenge to push your feature flag skills further.

Ready to quiz yourself?