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

Member-only story

Next.js + Vercel

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

Rajdeep Singh
FrontEnd Web
Published in
5 min readOct 8, 2024

--

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

--

--

FrontEnd Web
FrontEnd Web

Published in FrontEnd Web

FrontendWeb is a platform for writers and readers to read and write a new post about frontend developers, full-stack developers, Web developers, and Computer science. It is an open-source community that joins and gathers frontend developers to build and share knowledge with other

Rajdeep Singh
Rajdeep Singh

Written by Rajdeep Singh

Follow me if you learn more about JavaScript | TypeScript | React.js | Next.js | Linux | NixOS | Frontend Developer | https://linktr.ee/officialrajdeepsingh

Responses (1)