Cashiar Developers

In the App Router, fetch the catalogue in Server Components. Next.js caches it, so your pages stay fast and well under the rate limits.

.env.local

NEXT_PUBLIC_CASHIAR_KEY=pk_live_your_key

app/lib/cashiar.ts

const BASE = 'https://api.cashiar.app/v1/storefront';

export async function cashiar<T>(path: string, revalidate = 60): Promise<T> {
  const res = await fetch(`${BASE}${path}`, {
    headers: { Authorization: `Bearer ${process.env.NEXT_PUBLIC_CASHIAR_KEY}` },
    next: { revalidate },
  });
  if (!res.ok) throw new Error((await res.json()).message);
  return res.json();
}

app/page.tsx

import Link from 'next/link';
import { cashiar } from './lib/cashiar';

export default async function Home() {
  const [shop, { items }] = await Promise.all([
    cashiar<Shop>('/shop', 300),
    cashiar<ProductsPage>('/products?limit=24'),
  ]);
  return (
    <main>
      <h1>{shop.name}</h1>
      <ul>
        {items.map((p) => (
          <li key={p.id}>
            <Link href={`/products/${p.id}`}>{p.name}</Link>
          </li>
        ))}
      </ul>
    </main>
  );
}

app/products/[id]/page.tsx

import { cashiar } from '../../lib/cashiar';

export default async function ProductPage({ params }: { params: Promise<{ id: string }> }) {
  const product = await cashiar<Product>(`/products/${(await params).id}`, 30);
  return <h1>{product.name}</h1>;
}

Place orders from a Client Component or a Server Action with POST /orders, as in Cart and checkout. Use a short revalidate for stock, or none on the product page while the customer is choosing.