Vercel Analytics and Speed Insights

We are now going to add Vercel Analytics and Speed Insights to our project using two packages by Vercel so that later, we can go to our Vercel Dashboard and check out how well our project performs

The two chapters are quite similar because both packages work similarly. The real difference is only the name. This means that if you are done with the Analytics chapter, you just need to repeat the same steps for the Speed Insights package.

Add Vercel Analytics to your project

Warning

If you want to use this service, extra fees might apply, so make sure you check out the vercel analytics pricing page first; on a hobby plan the first 2500 events are free, and data will be kept for up to one month

As we are about to release our project, now should be a good time to add vercel analytics so that we can have an overview of who visits our project

First, go to vercel.com and log in

You should now be on the overview page, select the project for which you want to add analytics

On the project page, in the top navigation click on Analytics

Next, click on the Enable button

Chose your plan, if you haven't already done so you may want to check out the vercel analytics pricing page

Now we need to add Vercel Snalytics to our Next.js project, so we go back into VSCode and open our project

Then we open the VSCode terminal and run the following command to install the Vercel Analytics package:

terminal

npm i @vercel/analytics --save-exact

Now we open the root layout that is the /app folder, and add the following code:

/app/layout.tsx

import './global.css'
import { Metadata } from 'next'
import HeaderNavigation from '@/components/header/Navigation'
import { Kablammo } from 'next/font/google'
import { Analytics } from '@vercel/analytics/react'
 
export const metadata: Metadata = {
    title: {
        template: '%s | example.com',
        default: 'Home | example.com',
    },
    description: 'My description',
    openGraph: {
        url: 'https://example.com/',
        siteName: 'My website name',
        locale: 'en_US',
        type: 'website',
    },
}
 
const kablammo = Kablammo({
    subsets: ['latin'],
    variable: '--font-kablammo',
    weight: ['400'],
    display: 'swap',
})
 
export default function RootLayout({
    children,
}: {
    children: React.ReactNode
}) {
    return (
        <html lang="en" className={kablammo.variable}>
            <body>
                <header>
                    <HeaderNavigation />
                </header>
                <main>{children}</main>
                <footer>
                    <p>My Footer</p>
                </footer>
                <Analytics />
            </body>
        </html>
    )
}

Line 5: we import the react component from the Vercel Analytics package

Line 43: we add the Analytics react component right before the body closing tag

There are a few things you can configure, like for example, the debug mode is enabled by default and will print messages in your console when the environment is development, to disable it change the code to this:

/app/layout.tsx

<Analytics debug={false} />

Line 43 set the debug prop of the analytics component to false to disable the debug mode

There is also a beforeSend option that lets you modify the events before they get sent to Vercel, if you want to use this advanced option, I recommend you have a look at their official example in the Vercel Analytics documentation

To see your Analytics in action, log in to your Vercel account, click on your project name, and then click on Analytics

Vercel "Web Analytics" quickstart
Vercel "Advanced Web Analytics Configuration" documentation

Add Vercel Speed Insights to your project

Warning

If you want to use this service, extra fees might apply, so make sure you check out the Vercel Speed Insights pricing page first; on a hobby plan, the first project is free, and you get up 10k free analytics events

First, go to vercel.com and log in

You should now be on the overview page, select the project for which you want to add analytics

On the project page, in the top navigation click on Speed Insights

Next, click on the Enable button

Now we need to add Vercel Speed Insights to our Next.js project, so we go back into VSCode and open our project

Then we open the VSCode terminal and run the following command to install the vercel Speed Insights package:

terminal

npm i @vercel/speed-insights --save-exact

Now we open the root layout that is the /app folder, and add the following code:

/app/layout.tsx

import './global.css'
import { Metadata } from 'next'
import HeaderNavigation from '@/components/header/Navigation'
import { Kablammo } from 'next/font/google'
import { Analytics } from '@vercel/analytics/react'
import { SpeedInsights } from '@vercel/speed-insights/next'
 
export const metadata: Metadata = {
    title: {
        template: '%s | example.com',
        default: 'Home | example.com',
    },
    description: 'My description',
    openGraph: {
        url: 'https://example.com/',
        siteName: 'My website name',
        locale: 'en_US',
        type: 'website',
    },
}
 
const kablammo = Kablammo({
    subsets: ['latin'],
    variable: '--font-kablammo',
    weight: ['400'],
    display: 'swap',
})
 
export default function RootLayout({
    children,
}: {
    children: React.ReactNode
}) {
    return (
        <html lang="en" className={kablammo.variable}>
            <body>
                <header>
                    <HeaderNavigation />
                </header>
                <main>{children}</main>
                <footer>
                    <p>My Footer</p>
                </footer>
                <Analytics />
                <SpeedInsights />
            </body>
        </html>
    )
}

Line 6: we import the react component from the Vercel Speed Insights package

Line 45: we add the Speed Insights react component right before the body closing tag

There are a few things you can configure, like for example, the debug mode is enabled by default and will print messages in your console when the environment is development, if you want to disable you change the code to this:

/app/layout.tsx

<SpeedInsights debug={false} />

Line 45: set the debug prop of the Speed Insights component to false

There is also a beforeSend option that lets you modify the data before it gets sent to Vercel, if you want to use this advanced option, I recommend you have a look at their official example in the Vercel Speed Insights documentation

To see your Speed Insights in action, login to your Vercel account, click on your projects name and then click on Speed Insights

Vercel "Speed Insights" quickstart
Vercel "Speed Insights Configuration" documentation

CSP directives update

If you use either Vercel Analytics or Speed Insights and have added the CSP header as described in the Adding CSP Headers in Next.js configuration chapter, then you will have to make a few adjustments to your configuration

Edit your next.config.mjs file, and then in the defaultCSPDirectives variable, remove the require-trusted-types-for 'script' directive

If this directive is enabled, you will get the following errors in your browser console:

This document requires 'TrustedScriptURL' assignment.

You might want to add a comment inside of your next.config.mjs, to let other developers that might wonder why this directive is missing, why you haven't included it:

// we removed the
// require-trusted-types-for 'script';
// directive from defaultCSPDirectives
// because of vercel analytics and speed insights

A second change you need to do (when using Vercel analytics), is to add the https://va.vercel-scripts.com domain for the development environment to the srcipt-src directive:

script-src 'self' 'unsafe-inline' 'unsafe-eval' https://va.vercel-scripts.com;

This is only needed in development, in development Vercel Analytics does NOT track visits, but it is still loading a script from that domain, which is why we add it to the script-src directive