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

akilesh

Akilesh

Posted on October 25, 2022

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



  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;

Enter fullscreen mode Exit fullscreen mode



  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.

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.

๐Ÿ’– ๐Ÿ’ช ๐Ÿ™… ๐Ÿšฉ
akilesh
Akilesh

Posted on October 25, 2022

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

ยฉ TheLazy.dev

About