Build a Next.js App

Augur works with any Next.js application — e-commerce storefronts, customer dashboards, sales rep portals, warehouse management tools, or internal admin panels.

Setup

Follow Getting Started to install the SDK and configure credentials, then create a shared API client:

// lib/augur.ts
import { AugurAPI } from '@simpleapps-com/augur-api';

export const api = new AugurAPI({
  siteId: process.env.AUGUR_SITE_ID!,
  bearerToken: process.env.AUGUR_TOKEN!,
});

E-Commerce: Product Catalog

// app/products/page.tsx
import { api } from '@/lib/augur';

export default async function ProductsPage() {
  const response = await api.items.invMast.list({
    limit: 25,
    edgeCache: '5m',
  });

  return (
    <ul>
      {response.data.map((item) => (
        <li key={item.inv_mast_uid}>
          {item.item_id} — {item.item_desc}
        </li>
      ))}
    </ul>
  );
}

E-Commerce: Search

// app/search/page.tsx
import { api } from '@/lib/augur';

export default async function SearchPage({
  searchParams,
}: {
  searchParams: Promise<{ q?: string }>;
}) {
  const { q } = await searchParams;
  if (!q) return <p>Enter a search term</p>;

  const results = await api.openSearch.itemSearch.list({
    q,
    limit: 20,
  });

  return (
    <ul>
      {results.data.map((item) => (
        <li key={item.inv_mast_uid}>{item.item_desc}</li>
      ))}
    </ul>
  );
}

E-Commerce: Cart and Checkout

// Add to cart
await api.commerce.cartLine.add(cartUid, {
  invMastUid: 12345,
  quantity: 2,
});

// Create checkout
const checkout = await api.commerce.checkout.create({
  cartHdrUid: cartUid,
});

// Validate
await api.commerce.checkout.validate(checkout.data.checkout_uid);

// Submit to P21
await api.commerce.checkout.activate(checkout.data.checkout_uid);

Dashboard: Customer Overview

// app/dashboard/page.tsx
import { api } from '@/lib/augur';

export default async function DashboardPage({ customerId }: { customerId: number }) {
  const customer = await api.customers.customer.list({ limit: 1 });
  const orders = await api.orders.orders.lookup({ limit: 10 });
  const invoices = await api.customers.customer.invoices(customerId, { limit: 10 });

  return (
    <div>
      <h1>Dashboard</h1>
      <section>
        <h2>Recent Orders</h2>
        <ul>
          {orders.data.map((order) => (
            <li key={order.order_no}>#{order.order_no}</li>
          ))}
        </ul>
      </section>
      <section>
        <h2>Invoices</h2>
        <ul>
          {invoices.data.map((inv) => (
            <li key={inv.invoice_no}>#{inv.invoice_no}</li>
          ))}
        </ul>
      </section>
    </div>
  );
}

Portal: Sales Rep View

// app/rep/[repId]/page.tsx
import { api } from '@/lib/augur';

export default async function RepPage({
  params,
}: {
  params: Promise<{ repId: string }>;
}) {
  const { repId } = await params;

  // Orders assigned to this sales rep
  const orders = await api.orders.oeHdrSalesrep.list(repId);

  return (
    <div>
      <h1>My Orders</h1>
      <ul>
        {orders.data.map((order) => (
          <li key={order.order_no}>
            #{order.order_no} — {order.customer_name}
          </li>
        ))}
      </ul>
    </div>
  );
}

Portal: Warehouse Operations

// Bin transfer
await api.nexus.binTransfer.create({
  fromBin: 'A-01-01',
  toBin: 'B-02-03',
  invMastUid: 12345,
  quantity: 10,
});

// PO receiving
await api.nexus.purchaseOrderReceipt.create({
  poNo: 'PO-1234',
  lines: [{ invMastUid: 12345, quantity: 50 }],
});

// Check VMI replenishment needs
const replenish = await api.vmi.warehouse.replenish(warehouseUid);

Best Practices

Make API calls in server components, not client-side
Never expose JWT tokens to the client — keep them in environment variables
See API Overview for edge caching, pagination, and error handling details

Build a Next.js App

On this page