Using Comments in Production and Localhost
Learn how to use comments in your production deployments and localhost with the @vercel/toolbar package.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
- Install
@vercel/toolbar
:pnpm i @vercel/toolbar
- 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.
import { VercelToolbar } from '@vercel/toolbar/next';
import { useIsEmployee } from 'lib/auth'; // Your auth library
export function StaffToolbar() {
const isEmployee = useIsEmployee();
return isEmployee ? <VercelToolbar /> : null;
}
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>
);
}
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:
/** @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.
Was this helpful?