Welcome to NextJS Guru!

  • How to add Vercel Analytics to Next.js

    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:

    1. Go to your Vercel account and project and go to the Analytics tab and click Enable. This will enable analytics on your account.
    2. Then, go to the code editor of your Next.js project and install the module npm i @vercel/analytics
    3. 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.