A newer version of this tutorial is available.
This Next.js 14 Tutorial is archived. This does not mean the information it contains is outdated, but it is no longer being updated.
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
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:
npm i @vercel/analytics --save-exactNow we open the root layout that is the /app folder, and add the following code:
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:
<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
Add Vercel Speed Insights to your project
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:
npm i @vercel/speed-insights --save-exactNow we open the root layout that is the /app folder, and add the following code:
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:
<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
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 insightsA 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