DEV Community

Cover image for Enhance Next.js with Vercel Analytics: A Step-by-Step Guide
Akilesh
Akilesh

Posted on • Updated on

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.
Image description

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

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
Enter fullscreen mode Exit fullscreen mode

or

yarn add @vercel/analytics
Enter fullscreen mode Exit fullscreen mode

3. 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;
Enter fullscreen mode Exit fullscreen mode

4. 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.

Image description

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.

Top comments (0)