Usagey + Next.js App Router Example

Demonstration of integrating Usagey for usage-based pricing in a Next.js application with App Router

API Key Not Configured

Please set your Usagey API key in the .env.local file to enable full functionality of this example.

Track Usage

Send usage events to Usagey to track how your customers are using your application.

View Demo

Usage Dashboard

View your usage data with charts and visualizations to understand consumption patterns.

View Demo

Pricing Plans

Implement flexible pricing tiers and see how they affect billing based on usage.

View Demo

How To Use This Example

This example demonstrates how to integrate the Usagey SDK into a Next.js application with App Router for tracking usage and implementing usage-based pricing.

Getting Started:

  1. Copy .env.local.example to .env.local and add your Usagey API key
  2. Run npm install to install dependencies
  3. Run npm run dev to start the development server
  4. Explore each demo page to see the Usagey functionality in action

Check out the source code to see how each feature is implemented. The main functionality is in thelib/usagey-client.ts file and the individual page components.

For more information, visit the Usagey NPM package or read the official documentation.