Next.js Stripe analytics dashboard template

What the overview shows

These are the cards on the signed-in overview. Revenue numbers come from your Stripe account. Traffic numbers come from the tracking component in your Next.js app.

Revenue (7, 14, or 30 days)

Sum of succeeded Stripe charges in the selected window, in dollars, plus the percent change versus the previous window of the same length. The revenue API requests up to 100 charges for the current window and 100 for the previous one.

Average daily revenue

That revenue total divided by the number of days in the range.

Monthly recurring revenue

Sum of unit_amount on items of up to 100 active subscriptions, converted from cents. The current code does not divide a yearly price by 12, and the overview does not show an MRR percent change.

Visitor conversion rate

Shown after Postgres customer tables are configured. It is distinct checkout completions (or paid customers, whichever count is higher) divided by distinct signed-in users in the window. It is not divided by anonymous visitors. Without the database the card says “Configure Drizzle”.

Visitors online

Live count from the template’s own session tracker, not from Stripe.

The chart is titled “Revenue vs. visitors.” Revenue bars are daily succeeded Stripe charges. On the signed-in overview, the visitor line is generated from that revenue series in the current template. It is not a join to measured sessions. Referrer and country tables use tracked sessions. The public demo uses a fixed sample so you can see the same layout before paying.

Dashboard preview

The embed below is the same overview component as the live demo. Switch 7D, 14D, and 30D to change the sample series. The screenshot is the realtime view from the marketing site.

How Stripe hooks in

1. Add STRIPE_SECRET_KEY to the environment of the Next.js app you deploy. The key is read only by the revenue API on that app.
2. A signed-in user opens the overview. The page calls GET /api/datalighthouse/revenue?days=7|14|30. That route requires a Clerk session.
3. The route uses the Stripe Node SDK to list succeeded charges in the window and active subscriptions. Amounts are stored in cents and shown in dollars.
4. If the key is missing, the API returns an error and the overview says it could not load Stripe revenue. Traffic cards still use the template’s tracker.

Checkout on datalighthouse.dev is Polar. Stripe is not the processor for the $59 license. It is only the optional revenue source inside your copy of the dashboard. The quickstart states the same split.

Setup

Most teams add tracking in a few minutes after the source is in their app. Deeper notes ship in the private repository after purchase.

1. Step 1

   Add the Tracking Component

   Paste one component into your app layout and you are live.

2. Step 2

   Connect Stripe (Optional)

   Drop in your Stripe keys to unlock revenue and MRR insights.

3. Step 3

   Open the Dashboard

   See real-time sessions and trends instantly.

import { TrackingComponent } from "@/components/data-lighthouse/tracking-component"

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <TrackingComponent />
        {children}
      </body>
    </html>
  )
}

$59 once, then you host it

One-time purchase of a self-hosted Next.js template. Full source, lifetime updates, and use in unlimited projects.

• Full Next.js + TypeScript source code
• Real-time analytics with 3D globe
• Stripe revenue dashboard
• Supabase customer vault setup
• Automated GitHub repo invites
• Lifetime updates
• Developer documentation
• Use in unlimited projects

Compare it with other Next.js analytics dashboards · Analytics tool comparisons · Alternatives