Vercel.com provides an easy-to-use analytics solution for Next.js for free covering basic analytics needs.
If you don’t want to integrate Google Analytics this is the tool for you.
Vercel platforms offers a generic free tier for Hobby plan so you can enable for free.
Follow these steps to enable Vercel Analytics in your Nextj.js project:
- Go to your Vercel account and project and go to the
Analytics
tab and clickEnable
. This will enable analytics on your account. - Then, go to the code editor of your Next.js project and install the module
npm i @vercel/analytics
- Import the required React component to your main
layout.tsx
file and use the<Analytics/>
React component in your code immediately before the</body>
tag just like Google Analytics tracking code.
Example code:
import { Analytics } from '@vercel/analytics/next';
export default function RootLayout({ children }: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<head>
<title>Nextjsguru.com</title>
</head>
<body>
{children}
<Analytics />
</body>
</html>
)
}
4. After you’ve added the Analytics component to your main layout file, deploy your application to Vercel by running vercel
command (or vercel --prod
if you’re deploying to production).
Tracking data will be gathered immediately and you will be able to see visitors’ activity in real time in your Vercel Analytics tab.