How We Got Analytics Running on Our Next.js Blog in Minutes
Before we get into enabling analytics, here’s a quick bit of background on how we built the blog in the first place:
When we were building the blog site, we had a few discussions about how we wanted to approach it, but one thing that was fixed was the choice of Next.js. It simplified our approach since we didn’t have a lot of isolated components, and for our use case, it was the best option as it was more manageable than the alternatives and easier to maintain. Our familiarity with React probably also helped us in choosing Next.js.
We considered deploying on Cloudflare Workers, since its free tier seemed quite generous, but we ran into issues with OpenNext (more on this in a future blog post). In the end, we thought, if we are choosing Next.js, we might as well go with Vercel, especially since we are just starting out.
It’s been a couple of months now since we hosted this blog site on Vercel, but we also wanted to get some usage related stats to know how many users and page views we are getting. That’s when we stumbled upon Vercel’s Web Analytics dashboard. It took us just a couple of minutes (and when I say a couple of minutes, it’s probably less than five) to set up and yes, it’s that easy.
We already had our deployment in place. All we had to do was go to the Analytics tab in our project and enable it, as shown in the screenshot below:
I’m on Vercel’s free Hobby plan, which gives me up to 50,000 events per month and only keeps 30 days of analytics history. Custom events aren’t supported here, so you’re limited to basic page view tracking. If you upgrade to the Pro plan, you get more events, up to 12 months of history, and the ability to track custom events, which is handy once your site grows or you want deeper insights.
We’re also planning to explore Mixpanel in the future (more on this in a separate blog), especially if traffic grows or we add more interactive features. It would give us deeper insights beyond basic page views.
Once Analytics is enabled, you need to install the @vercel/analytics package. Since I use npm, I installed it like this:
npm i @vercel/analyticsAfter that, I just had to add the Analytics component provided by Vercel into the root layout, which is the top-level wrapper for the entire app in Next.js. Every page in the app gets loaded inside this layout, so it basically works as the main wrapper for everything. Here’s the snippet from app/layout.tsx:
import { Analytics } from '@vercel/analytics/next';
// Other imports and methods added
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en" suppressHydrationWarning>
<body className={`${font.className} min-h-screen flex flex-col overflow-auto`} suppressHydrationWarning>
<Providers>
<ThemeProvider attribute="class" defaultTheme="system" enableSystem disableTransitionOnChange>
<Header />
<main className="flex-grow">{children}</main>
<Footer />
<Toaster />
</ThemeProvider>
</Provirs>
<Analytics />
</body>
</html>
)
}Here’s how the dashboard looks after deploying the changes:
Since we deployed these changes only a few minutes ago, the visitor and page-view numbers are still very low.
But how does it all work?
If you’re wondering that, let’s break it down.
When you enable Web Analytics in the Vercel dashboard and redeploy your project, Vercel sets up a few internal routes under / _vercel/insights/*. You won’t see these in your codebase, as they are created automatically by Vercel and are used purely for collecting and serving analytics data.
Once those routes are in place, the <Analytics /> component in your root layout knows exactly where to send the usage information it tracks. Everything happens quietly in the background: the component sends events, the internal routes receive them, and the Vercel analytics dashboard updates automatically. Essentially, events flow from the component to the internal routes and then into Vercel’s analytics system, updating the dashboard with the latest numbers.
So that’s pretty much the whole flow behind the scenes. It’s a small setup on our side, but Vercel handles all the heavy lifting for us.
And that's a wrap! Thanks for reading, and feel free to reach out if you have any doubts or feedback. Happy learning!
