Next.js

Next.js works well with the SDK: fetch bundle data on the server (App Router server components or route handlers), render with hooks on the client, and add to cart with your Storefront API client of choice.

Install.
Terminal window
```
npm install @kitenzo/react
```

Fetch on the server (App Router server component or route handler). Keep the key in a server-only env var:

import { KitenzoClient } from '@kitenzo/react';

async function getBundle(id: number) {
  const client = new KitenzoClient({ apiKey: process.env.KITENZO_API_KEY! });
  return client.getBundle(id);
}

export default async function Page({ params }: { params: { id: string } }) {
  const bundle = await getBundle(Number(params.id));
  return <BundleClient initialData={bundle} />;
}

Render on the client with the provider and hooks:

'use client';
import { KitenzoProvider, useBundle, useBundleBuilder, useBundlePrice } from '@kitenzo/react';

export default function BundleClient({ initialData }) {
  return (
    <KitenzoProvider apiKey={process.env.NEXT_PUBLIC_KITENZO_API_KEY!}>
      <Inner initialData={initialData} />
    </KitenzoProvider>
  );
}

function Inner({ initialData }) {
  const { bundle } = useBundle(initialData.id, { initialData });
  const builder = useBundleBuilder(bundle);
  const price = useBundlePrice(bundle, builder.selections);
  // render your UI…
}

Add to cart using your Storefront API integration. Use the SDK cart helpers to produce lines + attributes:

import { useBundleCart, buildCartPayload } from '@kitenzo/react';

const { addBundleToCart: configure } = useBundleCart();
const result = await configure(bundle, builder.selections);
const { lines, attributes } = buildCartPayload(result, currentCartAttributes);
// pass `lines` + `attributes` to your cartLinesAdd / cartAttributesUpdate calls