How-to
3 min read

Add the Vercel Toolbar to your Production Environment

Learn how to add the Vercel Toolbar to your production environment to enable commenting and collaboration.
Table of Contents

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

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]

Before using the Vercel Toolbar in a production deployment Vercel recommends conditionally injecting the toolbar. Otherwise, all visitors will be prompted to log in when visiting your site.

The following example demonstrates code that will show the Vercel Toolbar on a production deployment.

Next.js (/app)
Next.js (/pages)
Other frameworks
components/staff-toolbar.tsx
'use client';
import { VercelToolbar } from '@vercel/toolbar/next';
import { useIsEmployee } from 'lib/auth'; // Your auth library
 
export function StaffToolbar() {
  const isEmployee = useIsEmployee();
  return isEmployee ? <VercelToolbar /> : null;
}
Next.js (/app)
Next.js (/pages)
Other frameworks
app/layout.tsx
import { Suspense } from 'react';
import { StaffToolbar } from '@components/staff-toolbar';
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        {children}
        <Suspense>
          <StaffToolbar />
        </Suspense>
      </body>
    </html>
  );
}

Unlike comments on preview deployments, alerts for new comments won't be sent to a specific user by default. Vercel recommends linking your project to Slack with the integration, or directly mentioning someone when starting a new comment thread in production to ensure new comments are seen

Last updated on February 21, 2024