Add the Vercel Toolbar to your Local Environment

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

1. Install the @vercel/toolbar package and link your project

   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]

2. Add the toolbar to your project

   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

   TypeScript

   TypeScriptJavaScript

   /** @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.