How to Install and Use the Vercel Toolbar in Your Next.js Development Environment?

Next.js + Vercel

How to Install and Use the Vercel Toolbar in Your Next.js Development Environment?

Learn how to enable the Vercel Toolbar in your Next.js Application.

Vercel toolbar is a new tool that assists you in checking accessibility, Layout Shifts, interaction timing, Leaving feedback, Open Graph images preview, Edit content, and testing flags without additional tools.

In this tutorial, we learn how To enable the toolbar in your local development mode with easy steps:

1. Create the new nextjs project.
2. Install the @vercel/toolbar package
3. Install Vercel CLI
4. Link your project
   ∘ Vercel link command Demo
5. Configure the @vercel/toolbar package
6. Conclusion

You can check out all the code available for this project on GitHub here.

Create the new nextjs project.

First, create a new nextjs project using create next app cli using npm, npm, yarn, or bun. If your nextjs project is already created, then skip this section.

pnpm create next-app@latest project-name