Caso práctico Next.js: SaaS de pedidos e inventario

Caso práctico Next.js: SaaS de pedidos e inventario | Nicolás Garzón

Texto

Browser
├─ public storefront
├─ business dashboard
├─ delivery mobile UI
└─ platform admin
        ↓
Next.js App Router
├─ Server Components
├─ Client Components
├─ Server Actions
├─ Route Handlers
├─ Proxy
├─ DAL/services
└─ Cache Components
        ↓
PostgreSQL
Redis / shared cache
Object storage
Queue workers
Email/payment/maps providers
Observability

Texto

app/
├─ (marketing)/
│  ├─ page.tsx
│  ├─ pricing/page.tsx
│  └─ services/page.tsx
├─ (auth)/
│  ├─ login/page.tsx
│  └─ recover/page.tsx
├─ (dashboard)/
│  └─ dashboard/
│     ├─ layout.tsx
│     ├─ page.tsx
│     ├─ orders/
│     │  ├─ page.tsx
│     │  └─ [orderId]/page.tsx
│     ├─ inventory/page.tsx
│     ├─ products/
│     ├─ customers/
│     └─ settings/
├─ storefront/[businessSlug]/
├─ delivery/
├─ platform/
└─ api/
   ├─ webhooks/payment/route.ts
   ├─ uploads/route.ts
   └─ v1/orders/route.ts

TypeScript

export default function RootLayout({ children }: LayoutProps<"/">) {
  return (
    <html lang="es">
      <body>
        <a href="#main-content" className="skip-link">
          Saltar al contenido
        </a>
        {children}
      </body>
    </html>
  );
}

TypeScript

export default async function DashboardLayout({ children }: LayoutProps<"/dashboard">) {
  const session = await requireSession();
  const membership = await getCurrentMembership(session.userId);

  if (!membership) redirect("/onboarding");

  return (
    <DashboardShell navigation={navigationFor(membership.role)}>
      {children}
    </DashboardShell>
  );
}

TypeScript

import "server-only";

export async function getAccessibleOrder(input: {
  orderId: string;
  businessId: string;
  userId: string;
}): Promise<OrderView | null> {
  const order = await db.order.findFirst({
    where: {
      id: input.orderId,
      businessId: input.businessId,
      business: {
        members: { some: { userId: input.userId } },
      },
    },
    select: {
      id: true,
      number: true,
      status: true,
      total: true,
      createdAt: true,
      customer: { select: { id: true, name: true } },
    },
  });

  return order ? toOrderView(order) : null;
}

TypeScript

export default async function OrdersPage({
  searchParams,
}: PageProps<"/dashboard/orders">) {
  const query = ordersQuerySchema.parse(await searchParams);
  const session = await requireBusinessSession();

  return (
    <main id="main-content">
      <OrdersHeader />
      <OrdersFilters initialQuery={query} />
      <Suspense fallback={<OrdersTableSkeleton />}>
        <OrdersTableLoader session={session} query={query} />
      </Suspense>
    </main>
  );
}

Texto

marketing/pricing          → cached public
product catalog public     → cached + tags
business configuration     → cached by business with invalidation
live inventory             → request-time or short cache
personal session/menu      → request-time
order list private         → request-time by default
aggregate reports          → cached/materialized depending freshness

TypeScript

async function getPublicCatalog(businessSlug: string) {
  "use cache";
  cacheLife("hours");
  cacheTag(`catalog:${businessSlug}`);

  return catalogRepository.getPublished(businessSlug);
}

Texto

form/client intent
→ Server Action
→ parse schema
→ require session
→ authorize branch/customer/products
→ idempotency check
→ transaction
   ├─ create order
   ├─ create items
   ├─ decrement/reserve stock
   ├─ write audit log
   └─ write outbox event
→ commit
→ update/revalidate tags
→ redirect or result

TypeScript

"use server";

export async function createOrderAction(
  _previous: CreateOrderState,
  formData: FormData,
): Promise<CreateOrderState> {
  const parsed = createOrderSchema.safeParse(parseOrderForm(formData));
  if (!parsed.success) {
    return { status: "invalid", errors: parsed.error.flatten().fieldErrors };
  }

  const session = await requireBusinessSession();

  const result = await orderService.create({
    actorId: session.userId,
    businessId: session.businessId,
    branchId: session.branchId,
    idempotencyKey: parsed.data.idempotencyKey,
    input: parsed.data,
  });

  updateTag(`business:${session.businessId}:orders`);
  revalidateTag(`business:${session.businessId}:dashboard`, "max");

  return { status: "success", orderId: result.id };
}

Texto

Business
├─ Branch
├─ Membership
├─ Product
│  ├─ Variant
│  └─ Inventory per Branch
├─ Customer
└─ Order
   ├─ OrderItem
   ├─ Payment
   ├─ Delivery
   └─ StatusHistory

TypeScript

export async function POST(request: Request) {
  const rawBody = await request.text();
  verifySignature(rawBody, request.headers.get("x-signature"));

  const event = paymentEventSchema.parse(JSON.parse(rawBody));
  await paymentService.processIdempotently(event);

  return new Response(null, { status: 204 });
}