State Management

To use the State Manager within Next.js, you need to have the @vue-storefront/next package installed. This step is already done if you have followed the Getting Started. If not, you'll find installation instructions there.

If you followed the Getting Started guide, your sdk/alokai-context.tsx already exports state hooks alongside AlokaiProvider and useSdk. These hooks are returned by createAlokaiContext and follow React's useState pattern — each returns a [value, setter] tuple.

Available hooks

The types come from the SfContract generic you pass to createAlokaiContext<Sdk, SfContract>(). This contract tells the state hooks which types your middleware uses for cart, customer, currency, and locale. Since those types can be customized in your middleware, the contract keeps everything in sync.

Initial data

The AlokaiProvider accepts an initialData prop to hydrate state on the first render. This avoids a flash of empty state during SSR. Pass currencies, currency, locale, and locales:

<AlokaiProvider
  initialData={{
    currencies: ["USD", "EUR"],
    currency: "USD",
    locale: "en",
    locales: ["en", "de"],
  }}
  sdk={getSdk({ getLocale: () => locale })}
>
  {children}
</AlokaiProvider>

Reading state

Use the hooks in any client component to read global state. You only need the value (first element of the tuple):

"use client";

import { useSfCartState, useSfCurrencyState } from "@/sdk/alokai-context";

export function CartSummary() {
  const [cart] = useSfCartState();
  const [currency] = useSfCurrencyState();

  return (
    <div>
      <p>Items in cart: {cart?.totalItems ?? 0}</p>
      <p>Currency: {currency}</p>
    </div>
  );
}

Updating state

Use the setter (second element of the tuple) to update state. For example, changing the selected currency:

"use client";

import { useRouter } from "next/navigation";
import { useSfCurrencyState } from "@/sdk/alokai-context";

export function CurrencySelector() {
  const router = useRouter();
  const [currency, setCurrency] = useSfCurrencyState();

  return (
    <select
      onChange={(e) => {
        setCurrency(e.target.value);
        router.refresh();
      }}
      value={currency}
    >
      <option value="USD">USD</option>
      <option value="EUR">EUR</option>
    </select>
  );
}