Next.js 15 App Router (`parityedge`)

1. Installation

npm install parityedge

2. Client Component Integration (App Router)

Embed the isolated Shadow DOM banner in any client or server-rendered page:

// app/pricing/page.tsx
'use client';

import { ParityBanner, useParityEdge } from 'parityedge/react';

export default function PricingPage() {
  const { data } = useParityEdge({
    projectId: 'prj_live_YOUR_PROJECT_ID',
  });

  return (
    <main className="max-w-4xl mx-auto py-12 px-4">
      {/* 0-CLS Isolated Banner */}
      <ParityBanner
        projectId="prj_live_YOUR_PROJECT_ID"
        theme="dark"
        position="bottom-pill"
      />

      <h1 className="text-3xl font-bold">Pro License — $49 USD</h1>
      {data?.eligible && (
        <p className="text-emerald-400 mt-2 font-medium">
          {data.flag} Regional price: ${(49 * (1 - data.discountPercentage / 100)).toFixed(2)} USD
        </p>
      )}
    </main>
  );
}

3. Edge Middleware for Server-Side Pre-Rendering

Optionally resolve visitor country at the edge to inject localized discounts into request headers:

// middleware.ts
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export async function middleware(req: NextRequest) {
  const country = req.geo?.country || 'US';
  const response = NextResponse.next();
  response.headers.set('x-visitor-country', country);
  return response;
}

export const config = {
  matcher: ['/pricing', '/checkout/:path*'],
};