Next.js Unkey Starter Kit

A starter template for building Pay-As-You-Go apps with Next.js, Unkey and Supabase

Features · Clone and run locally · More Examples

Features

• Robust API key management via the @unkey/api:
  • Efficient creation and tier management
  • Precise quota enforcement
  • Accurate total cost calculations
  • Effortless tier upgrades without additional lookups
  • Usage analytics
• Scheduled background jobs utilizing Vercel Crons:
  • Automated clean-up of obsolete API keys
  • Streamlined creation of new API keys
• supabase-ssr. A package to configure Supabase Auth to use cookies
• Styling with Tailwind CSS

Clone and run locally

Create a database via Supabase

1. Go to the Supabase dashboard.
2. Create a new project and configure database.

Create a root key

1. Head over to Unkey settings.root-keys.
2. Click "Create New Root Key".
3. Enter the key name.
4. Click "Create".

Create your first API

1. Now, go to apis and click on the "Create New API" button.
2. Give it a name.
3. Click "Create".

Set up the example

1. Clone the repository

   Copy

   1git clone git@github.com:unrenamed/unkey-nextjs-pay-as-you-go
   2cd unkey-nextjs-pay-as-you-go

2. Install the dependencies

   Copy

   1pnpm install

3. Use .env.example to create .env.local file and update the following:

   Copy

   1NEXT_PUBLIC_SUPABASE_URL=your-project-url
   2NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key
   3SUPABASE_SERVICE_ROLE_KEY=your-serice-role-key
   4UNKEY_ROOT_KEY=your-unkey-root-key
   5UNKEY_API_ID=your-unkey-api-id
   6CRON_SECRET=your-cron-secret

   You will find more info about where to get each variable in the file.

4. You can now run the Next.js local development server:

   Copy

   1pnpm dev

   The starter kit should now be running on localhost:3000.

More Unkey examples

• Manage call quotas with Rust, Rocket and Unkey
• Protect your Rust + Axum routes with Unkey
• Use Unkey time-sensitive API keys for digital content access