Skip to content
5 min read

Using Comments in Production and Localhost

Learn how to use comments in your production deployments and localhost with the @vercel/toolbar package.
Table of Contents
Choose a framework to optimize documentation to:

Comments are available in all preview deployments on Vercel. To enable comments in production deployments and localhost, you must add the Vercel toolbar to your project with our @vercel/toolbar package, or with our injection script.

Using the package offers the following benefits:

  • You and your team can leave feedback at any time while using your app in production
  • You can enable the toolbar in localhost, allowing you to see and resolve preview comments in your local environment
  • You can use other toolbar features, such as toggling Draft Mode, in production
  1. Install @vercel/toolbar:
    pnpm i @vercel/toolbar
  2. Link your local project to your Vercel project with the vercel link command using Vercel CLI

Before using Comments in a production deployment, keep in mind the following considerations:

  • We recommend conditionally injecting the toolbar. Otherwise, all visitors will be prompted to log in when visiting your site
  • Unlike comments on preview deployments, alerts for new comments won't be sent to a specific user by default. We recommend linking your project to Slack with our integration, or directly mentioning someone when starting a new comment thread in production to ensure new comments are seen

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

Next.js (/app)
Next.js (/pages)
Other frameworks
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
import { Suspense } from 'react';
import { StaffToolbar } from '@components/staff-toolbar';
export default function RootLayout({
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
          <StaffToolbar />

You can use the Vercel Toolbar in your local environment with the @vercel/toolbar package. Doing so will enable you to view, respond to, and act on comments from localhost.

To use Comments 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)
Other frameworks
/** @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, follow the instructions in the section on using the toolbar in production deployments. Rebuild your local environment, and you should see the toolbar.

Last updated on September 28, 2023