How to Build an Inventory Management System with Next.js

Inventory management is the backbone of any business that sells physical products. Whether you run a small e-commerce store or a large warehouse operation, tracking stock levels, orders, and suppliers is essential.

In this guide, we will build a comprehensive inventory management dashboard using Next.js, Prisma, and PostgreSQL. You will learn how to implement stock tracking, low stock alerts, order management, and supplier management.

Database Schema

model Product {
  id          String   @id @default(cuid())
  name        String
  sku         String   @unique
  description String?
  category    String
  price       Decimal
  quantity    Int      @default(0)
  minStock    Int      @default(10)
  supplierId  String?
  supplier    Supplier? @relation(fields: [supplierId], references: [id])
  createdAt   DateTime @default(now())
  updatedAt   DateTime @updatedAt
}

model Supplier {
  id      String    @id @default(cuid())
  name    String
  email   String
  phone   String?
  leadTime Int      @default(7)
  products Product[]
  createdAt DateTime @default(now())
}

Building the Inventory Dashboard

export async function getInventoryStats() {
  const totalProducts = await prisma.product.count()
  const lowStock = await prisma.product.count({ where: { quantity: { lte: prisma.product.fields.minStock } } })
  const outOfStock = await prisma.product.count({ where: { quantity: 0 } })
  const totalValue = await prisma.product.aggregate({ _sum: { price: true } })
  return { totalProducts, lowStock, outOfStock, totalValue: totalValue._sum.price }
}

Low Stock Alert Component

function LowStockAlerts({ products }: { products: Product[] }) {
  const lowStockItems = products.filter(p => p.quantity <= p.minStock)

  return (
    <div className="rounded-xl bg-gray-900 p-4">
      <h3 className="text-sm font-semibold text-white mb-3">Low Stock Alerts</h3>
      <div className="space-y-2">
        {lowStockItems.map(product => (
          <div key={product.id} className="flex items-center justify-between py-2 border-b border-gray-800">
            <div>
              <p className="text-sm text-white">{product.name}</p>
              <p className="text-xs text-gray-400">SKU: {product.sku}</p>
            </div>
            <div className="text-right">
              <p className={`text-sm font-semibold ${
                product.quantity === 0 ? 'text-red-400' : 'text-yellow-400'
              }`}>{product.quantity} in stock</p>
              <p className="text-xs text-gray-500">Min: {product.minStock}</p>
            </div>
          </div>
        ))}
      </div>
    </div>
  )
}

Cross-Selling: Ship Your Inventory Manager Faster

Our Inventory Manager template includes all of this and more — barcode support, purchase orders, warehouse zone management, stock transfers, and detailed inventory audit reports. It is fully production-ready.

Pair with Restaurant POS for food service inventory, or Cloud Cost Monitor for digital asset tracking. The templates integrate seamlessly into any business workflow.