> For the complete documentation index, see [llms.txt](https://docs.winga.me/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.winga.me/integrations/nextjs.md).

# Next.js (REST)

The dedicated [`@winga/next`](/sdks/nextjs.md) adapter is coming in Phase 2. Until then, client components use [`@winga/react`](/sdks/react.md), and Server Components or Route Handlers call the [Evaluation API](/api-reference/evaluation-api.md) directly.

```typescript
// app/checkout/page.tsx — Server Component
async function getFlags(): Promise<Record<string, { enabled: boolean }>> {
  const res = await fetch('https://api.winga.me/v1/flags?env=production', {
    headers: { 'X-Winga-Key': process.env.WINGA_KEY! },
    // Re-fetch flags at most every 30s; tune to taste.
    next: { revalidate: 30 },
  })
  if (!res.ok) return {}
  const data = await res.json()
  return data.flags ?? {}
}

export default async function CheckoutPage() {
  const flags = await getFlags()
  return flags['new-checkout']?.enabled ? <NewCheckout /> : <LegacyCheckout />
}
```

Keep the key server-side — read it from `process.env`, never expose it to the browser. For client-side reads, wire up the [`@winga/react`](/sdks/react.md) provider instead.