Tutorial
4 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

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

Prerequisites

  1. Install @vercel/toolbar:
    pnpm
    yarn
    npm
    pnpm i @vercel/toolbar
  2. Link your local project to your Vercel project with the vercel link command using Vercel CLI

Using @vercel/toolbar in production

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.

@components/staff-toolbar
import { VercelToolbar } from '@vercel/toolbar/next';
import { useIsEmployee } from 'lib/auth'; // Your auth library
 
export function StaffToolbar() {
  const isEmployee = useIsEmployee();
  return isEmployee ? <VercelToolbar /> : null;
}
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>
  );
}

Using @vercel/toolbar in localhost

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.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, 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 April 27, 2024