vercel-logotype Logovercel-logotype Logo
Add to Localhost
How-to

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 @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 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:

    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>
  );
}
Last updated on July 23, 2024
Previous
Add to Your Environment
Next
Add to Production