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.

  1. Install the package using the following command:

    pnpm i @vercel/toolbar

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

    vercel link [path-to-directory]
  2. 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
    /** @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 add the following code to your layout.tsx or layout.jsx file:

    Next.js (/app)
    Next.js (/pages)
    Other frameworks
    import { VercelToolbar } from '@vercel/toolbar/next';
    export default function RootLayout({
    }: {
      children: React.ReactNode;
    }) {
      const shouldInjectToolbar = process.env.NODE_ENV === 'development';
      return (
        <html lang="en">
            {shouldInjectToolbar && <VercelToolbar />}
Last updated on June 22, 2024