Add to Production
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
Next.js (/app)

To enable the toolbar in your production 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

    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>
  );
}

  3. Managing notifications and integrations for Comments on production

    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 May 4, 2024
Previous
Add to Localhost
Next
Comments