This is a Next.js project bootstrapped with create-next-app.

Getting Started

Prerequisites

• Node.js 18+ installed
• Clerk account with billing enabled
• Stripe account connected to Clerk (for billing)

Environment Setup

1. Copy .env.example to .env:

   cp .env.example .env

2. Get your Clerk API keys from Clerk Dashboard and add them to .env:

   • NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY
   • CLERK_SECRET_KEY
   • CLERK_WEBHOOK_SECRET (optional, for webhooks)

3. Get your Resend API key from Resend Dashboard and add it to .env:

   • RESEND_API_KEY - Required for contact form email functionality
   • RESEND_FROM_EMAIL (optional) - Email address to send from (default: noreply@xtractor.com)
   • CONTACT_EMAIL (optional) - Email address to receive contact form submissions (default: contact@xtractor.com)

4. Configure billing in Clerk Dashboard:

   • Enable billing feature
   • Connect your Stripe account
   • Create subscription plans and features
   • Configure webhook endpoint: https://your-domain.com/api/webhooks/clerk (for production)

Install Dependencies

npm install

Run Development Server

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Open http://localhost:3000 with your browser to see the result.

This project uses @fontsource/jetbrains-mono to load JetBrains Mono, a monospace font designed for developers.

Clerk Billing Integration

This project uses Clerk Billing for subscription management:

• Pricing Page: /pricing - Displays subscription plans using Clerk's <PricingTable /> component
• Account Page: /account - User profile and subscription management using Clerk's <UserProfile /> component
• Protected Content: Use <Protect> component or has() method to restrict access based on subscription plans
• API Routes:
  • /api/user - Get current user data and subscription (from Clerk)
  • /api/user/subscription - Get user's active subscription (from Clerk)
  • /api/user/billing-history - Returns empty array (billing history is managed by Clerk/Stripe)

Protecting Content

Server Components:

import { auth } from '@clerk/nextjs/server';

export default async function Page() {
  const { has } = await auth();
  const hasPremiumPlan = has({ plan: 'premium' });

  if (!hasPremiumPlan) {
    return <div>Premium content only</div>;
  }

  return <div>Premium content here</div>;
}

Client Components:

"use client";
import { Protect } from "@clerk/nextjs";

export default function Page() {
  return (
    <Protect plan="premium" fallback={<div>Premium content only</div>}>
      <div>Premium content here</div>
    </Protect>
  );
}

Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.