Enhance Next.js with Vercel Analytics: A Step-by-Step Guide

" This article is published using Lamento🍋

We have a new player entered the field of analytics.
Just by taking a quick glance at Vercel Analytics it looks somewhat similar to plausible analytics, but beauty should be admired no hard work should go unnoticed.
First let's set up an exiting Next.js v-12 application with this analytics.

1. Enable Vercel Analytics

Go to your vercel dashboard and choose your project which you need to enable analytic.

Open analytics tab then select Audiences tab if it's your 1st time it will ask you to enable from the dialog.

2. Install Dependencies

In your project, install this package to monitor the application from Vercel dashboard.
@vercel/analytics allows you to track page views in your Next.js app or any other website that is deployed to Vercel. All page views are automatically tracked in the app.

npm install @vercel/analytics

or

yarn add @vercel/analytics

1. Inject the Analytics script

Import the Analytics component which is a wrapper around the tracking script, offering us more seamless integration with Next.js.

pages/_app.ts

import { Analytics } from '@vercel/analytics/react';

function MyApp({ Component, pageProps }) {

  return (

    <>

      <Component {...pageProps} />

      <Analytics />

    </>

  );

}

export default MyApp;

1. Deploy

Push your code to your version control and By deploying the application to Vercel we can see all the analytics instinct.

To see the updated visible, open your domain and preview the dashboard. The changes will be visible.

Finally

Vercel have provided a minimal and primary use case where it
check our site traffic and get all the essential insights.

Notable Features

• Visitors count
• Page Views
• Top Pages (Pages which are the most visited)
• Top Referrers (Sites refer the most traffic)
• Countries
• Operating Systems
• Browsers

Vercel says this feature will be free only at beta stage in the future it may offer in paid tires.