Vercel Toolbar
Add the Vercel Toolbar to your local environment
Add to Environments
To enable the toolbar in your local environment, add it to your project using the @vercel/toolbar package, or with an injection script.
Add to Localhost
-
Install the
@vercel/toolbar package and link your projectInstall the package using the following command:
pnpm
yarn
npm
bun
pnpm i @vercel/toolbarThen link your local project to your Vercel project with the
vercel link command using
Vercel CLI.
vercel link [path-to-directory] -
Add the toolbar to your projectTo use the Vercel Toolbar locally in a Next.js project, define
withVercelToolbar in your
next.config.js file and export it, as shown below:
Next.js (/app)
TypeScript
importtype { NextConfig } from'next';
import createWithVercelToolbar from'@vercel/toolbar/plugins/next';
constnextConfig:NextConfig= {
// Config options here };constwithVercelToolbar=createWithVercelToolbar();
// Instead of export default nextConfig, do this:exportdefaultwithVercelToolbar(nextConfig);
Then add the following code to your layout.tsx or layout.jsx file:
Next.js (/app)
TypeScript
import { VercelToolbar } from'@vercel/toolbar/next';
exportdefaultfunctionRootLayout({
children, }: {children:React.ReactNode;
}) {constshouldInjectToolbar=process.env.NODE_ENV==='development';
return (
{children} {shouldInjectToolbar &&}