npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2026 – Pkg Stats / Ryan Hefner

@statcounter/nextjs

v0.1.9

Published

Official Statcounter integration for Next.js

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Maintainers

statcounter-adminstatcounter-admin

Keywords

statcounternextjsnext.jsanalyticstrackingapp-router

Readme

@statcounter/nextjs

The official Statcounter integration for Next.js.

Contents

Features

  • Next.js App Router Ready : Optimized for Next.js 13, 14, and 15+ using the app/ directory standards.
  • Automatic Page Tracking : Automatically records page views on client-side route changes.
  • Lightweight : Zero-dependency wrapper with minimal impact on bundle size.
  • Invisible : Hardcoded to be hidden, ensuring your UI remains clean.
  • Easy Setup : Simple install process.

Installation

Stop your server then install statcounter with this :

npm install @statcounter/nextjs
# or
yarn add @statcounter/nextjs

Usage

1. Update your Layout

Open your root layout file (usually app/layout.tsx or app/layout.js).

Import the component at the top of the file:

import { StatCounter } from "@statcounter/nextjs";

2. Add the Component to Layout

Place the <StatCounter /> component inside your layout just before the closing </body> tag.

<StatCounter project_id={1234567} security_code="abcdef12" />

Delete the default values for the project_id and security_code and get your details from the Statcounter website by clicking your project name, the gear icon in the lower left corner, settings, then scroll down to bottom.

Example placement in your layout file.

// app/layout.tsx
import { StatCounter } from "@statcounter/nextjs";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        {/* Place Statcounter before closing body tag */}
        <StatCounter project_id={1234567} security_code="abcdef12" />
      </body>
    </html>
  );
}

3. Rebuild the site and restart the app

4. Verify install

After you rebuild the site and restart the server, go to your site and open the browser console > Network tab and reload the page. You should see this activity in the Network tab.

counter.js

https://c.statcounter.com/t.php?project_id=111111[...]

Load a few different pages to make sure the Statcounter fires on each page change.

If your project uses Session Replay you will also see

statcounter.io
recorder.js

Note: If you do not see any Statcounter related network activity, ensure your browser Adblocker is disabled as they often block analytics scripts.

Cookie Consent

You can toggle on Cookie Consent mode with this

sc_manageConsent={true}

And enter the Consent Program name here

sc_CMP="cookieyes"

Supported values are :

  • vanillaconsent
  • cookieyes
  • cookiebot
  • react-cookie-consent
<Statcounter project_id={1234567} security_code="abcdef12" sc_manageConsent={true} sc_CMP="vanillaconsent" />

For React Cookie Consent you also provide the cookie name

sc_cmpCookieName="myConsentCookie"
<Statcounter project_id={1234567} security_code="abcdef12" sc_manageConsent={true} sc_CMP="react-cookie-consent" sc_cmpCookieName="myConsentCookie"/>

Note : vanillaconsent is for Orest Bida CookieConsent

Vercel Hosted

If your site is deployed on Vercel and you don’t SSH into a server install Statcounter via your local dev environment and Git.

  1. Install @statcounter/nextjs locally using the steps 1 and 2 above.

  2. Commit and push the changes to your GitHub repository.

  3. Vercel will automatically detect the new change and redeploy your site including the statcounter tracking.

Advanced

If you prefer the project id and security code can be put in an environment variable file instead of the layout file. Some might prefer this if their site code is public on a Github repo. That way if someone clones your code they don't also pull down your statcounter tracking code.

  1. Add your statcounter details to the .env.local file which lives in the app root folder, in the same location as the file package.json. If this file does not exist you can create it.
NEXT_PUBLIC_STATCOUNTER_PROJECT_ID=1234567
NEXT_PUBLIC_STATCOUNTER_SECURITY_CODE="abcabcabc"
  1. In your layout file use code like this in the <StatCounter /> component, placing it just before the closing </body> tag.
<StatCounter 
  project_id={Number(process.env.NEXT_PUBLIC_STATCOUNTER_PROJECT_ID || 0)} 
  security_code={process.env.NEXT_PUBLIC_STATCOUNTER_SECURITY_CODE || ""} 
/>
  1. Build the site and restart the app for the changes to take effect

Support

If you have any questions please email us at Email or use our contact form here https://statcounter.com/support/contact/

Props

| Prop | Type | Required | Description | | :--- | :--- | :--- | :--- | | project_id | number | Yes | Your Statcounter Project ID number. | | security_code | string | Yes | Your Statcounter Security Code string. | | sc_manageConsent | boolean | No | Enable / disable Cookie Consent mode. | | sc_CMP | string | No | The name of your CMP. | | sc_cmpCookieName | string | No | If your CMP requires a cookie name, use this. |