Toolbar
Add to Environments
Add to Localhost

Add the Vercel Toolbar to your local environment

Last updated March 17, 2025

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 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.config.js
    /** @type {import('next').NextConfig} */
const createWithVercelToolbar = require('@vercel/toolbar/plugins/next');
const nextConfig = {
  // Config options here
};
 
const withVercelToolbar = createWithVercelToolbar();
// Instead of module.exports = nextConfig, do this:
module.exports = withVercelToolbar(nextConfig);

    Then add the following code to your layout.tsx or layout.jsx file:

    app/layout.tsx
    import { VercelToolbar } from '@vercel/toolbar/next';
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  const shouldInjectToolbar = process.env.NODE_ENV === 'development';
  return (
    <html lang="en">
      <body>
        {children}
        {shouldInjectToolbar && <VercelToolbar />}
      </body>
    </html>
  );
}
Previous
Add to Environments
Next
Add to Production

Was this helpful?

supported.