How-to
2 min read

Add the Vercel Toolbar to your Local Environment

Learn how to use the Vercel Toolbar in your local environment.
Table of Contents

To enable the toolbar in your local environment, add it to your project using the @vercel/toolbar package, or with an injection script.

Install the package using the following command:

pnpm
yarn
npm
pnpm i @vercel/toolbar

Then link your local project to your Vercel project with the vercel link command using Vercel CLI.

terminal
vercel link [path-to-directory]

To use the Vercel Toolbar locally in a Next.js project, define withVercelToolbar in your next.config.js file and export it, as shown below:

Next.js (/app)
Next.js (/pages)
Other frameworks
next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  // Config options here
};
 
const withVercelToolbar = require('@vercel/toolbar/plugins/next')();
// Instead of module.exports = nextConfig, do this:
module.exports = withVercelToolbar(nextConfig);

Then, follow the instructions in the section on using the toolbar in production deployments. Rebuild your local environment, and you should see the toolbar.

Last updated on February 22, 2024