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
    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)
    SvelteKit
    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 add the following code to your layout.tsx or layout.jsx file:

    Next.js (/app)
    Next.js (/pages)
    SvelteKit
    Other frameworks
    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