Vercel Analytics and Speed Insights

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

The 2 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 Analytics 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

How to fix TrustedScript errors

If the CSP trusted-types directive is in use, then you will get the following errors in your browser console:

This document requires 'TrustedScriptURL' assignment.

Which is why you need to remove the directive from your CSP header, to do so edit your next.config.mjs file and then search for require-trusted-types-for and delete that entry from your CSP directives list

You might want to add a comment instead (above the defaultCSPDirectives) to let other developers that might wonder why this directive is missing, or why you haven't included it:

// we commented out the trusted types directive:
// require-trusted-types-for 'script';
// because of the following error in the browser console:
// This document requires 'TrustedScript' assignment

I have more details about this directive in the require-trusted-types-for chapter in the CSP post

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 script-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

If you liked this post, please consider buying me a coffee ☕ or sponsor ❤️ me on GitHub, as it will help me create more content and keep it free for everyone