Building a full-featured Enterprise Resource Planning (ERP) system is one of the most complex projects in software development. Why? Because an ERP must manage interconnected data across departments, enforce strict data integrity for financial and audit compliance, handle multi-user environments with different permission levels, and integrate modules in real time without breaking anything.

A monolithic approach usually leads to spaghetti code, security holes, and impossible maintenance.

The solution: Build modularly start with a rock-solid foundation (authentication + RBAC + master data) and then add modules one by one.

By the end of Part 1, you will have a clean, production-ready core system featuring:

Multi-user authentication (Login/Register)
Role-Based Access Control (RBAC)
Complete Master Data management for Products (with categories)

Ready? Let’s build it with Next.js 15 (App Router).

Reparation & Technology (The Stack)

Chosen Technology Stack

The following technologies need to be prepared and used in the development process of this project. Each tool has a specific role to support building a modern, scalable, and maintainable web application.

Next.js 15 (App Router + React Server Components) – Blazing-fast full-stack React framework with built-in server actions, streaming, and excellent performance.
TypeScript – Type safety across frontend and backend.
Prisma ORM – Modern TypeScript-first ORM with excellent relational support and Prisma Studio.
PostgreSQL (or MySQL) – Strong ACID compliance for ERP data integrity.
Auth.js (NextAuth v5) – The most popular authentication solution for Next.js.
Tailwind CSS + shadcn/ui – Beautiful, accessible, customizable components.
Zod – Schema validation for forms and API safety.

Prerequisites (What you need installed)

Before starting the project, make sure the following tools are installed on your system. This setup can be used on macOS, Linux, or Windows.

Node.js 20+ or 22
PostgreSQL 16+ (or MySQL 8+)
Git
Any IDE (VS Code recommended with Prisma & Tailwind extensions)

Project Initialization

npx create-next-app@latest erp-foundation \
  --typescript --tailwind --eslint --app --yes
cd erp-foundation
# Install dependencies
npm install prisma @prisma/client authjs @auth/prisma-adapter zod
npm install -D prisma
# Initialize Prisma
npx prisma init --datasource-provider postgresql

Database Architecture & Basic ERD

ERP systems live or die by data integrity. We use Prisma relations, unique constraints, and soft deletes so that deleting a category never orphans products and audit trails remain intact.

Core Models (prisma/schema.prisma)

model User {
  id            String   @id @default(cuid())
  name          String?
  email         String   @unique
  emailVerified DateTime?
  image         String?
  role          Role     @default(STAFF)
  password      String?
  products      Product[]
  createdAt     DateTime @default(now())
  updatedAt     DateTime @updatedAt
}

model Category {
  id          String    @id @default(cuid())
  name        String    @unique
  description String?
  products    Product[]
  createdAt   DateTime  @default(now())
  updatedAt   DateTime  @updatedAt
}

model Product {
  id          String   @id @default(cuid())
  sku         String   @unique
  name        String
  price       Decimal  @db.Decimal(12, 2)
  stock       Int      @default(0)
  description String?
  categoryId  String
  category    Category @relation(fields: [categoryId], references: [id], onDelete: Restrict)
  userId      String?
  user        User?    @relation(fields: [userId], references: [id])
  deletedAt   DateTime? // Soft delete for audit
  createdAt   DateTime  @default(now())
  updatedAt   DateTime  @updatedAt

  @@index([sku])
}

enum Role {
  ADMIN
  WAREHOUSE_STAFF
  FINANCE
}

ERD Visualization

Figure 1: Basic ERD for Part 1 (Mermaid diagram – copy-paste ready)

Security & RBAC Implementation

Authentication with Auth.js v5

npx auth secret

Update app/api/auth/[...nextauth]/route.ts and configure with Prisma adapter + credentials provider (or add Google later).

Add roles to the session:

// lib/auth.ts
export const { handlers, signIn, signOut, auth } = NextAuth({
  adapter: PrismaAdapter(prisma),
  providers: [CredentialsProvider(...)],
  callbacks: {
    session({ session, user }) {
      session.user.role = user.role;
      return session;
    },
  },
});

Role-Based Access Control (RBAC)

Create a middleware in middleware.ts:

import { auth } from "@/lib/auth";

export default auth((req) => {
  const isAdmin = req.auth?.user?.role === "ADMIN";
  if (req.nextUrl.pathname.startsWith("/products") && !isAdmin) {
    return Response.redirect(new URL("/unauthorized", req.url));
  }
});

Example behavior:

ADMIN → full CRUD on products
WAREHOUSE_STAFF → can only view and update stock
FINANCE → read-only (audit safety)

Building Master Data – Product Module (CRUD)

1. Server Actions + Zod Validation

// actions/product-actions.ts
"use server";

import { z } from "zod";
import { prisma } from "@/lib/prisma";
import { revalidatePath } from "next/cache";

const ProductSchema = z.object({
  sku: z.string().min(1),
  name: z.string().min(1),
  price: z.number().min(0),
  categoryId: z.string(),
});
export async function createProduct(formData: FormData) {
  const validated = ProductSchema.parse({
    sku: formData.get("sku"),
    name: formData.get("name"),
    price: Number(formData.get("price")),
    categoryId: formData.get("categoryId"),
  });
  await prisma.product.create({ data: validated });
  revalidatePath("/products");
}

2. Product Form (Server Component + shadcn/ui)

Use shadcn/ui components (Button, Input, Select, DataTable):

// app/products/new/page.tsx
export default function NewProductPage() {
  return (
    <form action={createProduct}>
      <Input name="sku" placeholder="SKU" required />
      {/* ... other fields */}
      <Button type="submit">Create Product</Button>
    </form>
  );
}

3. Product List with Search & Filter

Use Server Components + searchParams:

// app/products/page.tsx
export default async function ProductsPage({
  searchParams,
}: {
  searchParams: { search?: string };
}) {
  const products = await prisma.product.findMany({
    where: searchParams.search
      ? { name: { contains: searchParams.search } }
      : {},
    include: { category: true },
  });
  return <DataTable data={products} />;
}

Best Practice: Soft Deletes

await prisma.product.update({
  where: { id },
  data: { deletedAt: new Date() },
});

Never use delete() always soft delete for financial audits.

6. Basic UI/UX – Sidebar & Navigation

We use shadcn/ui + Tailwind to create a clean dashboard.

Run:

npx shadcn@latest add sidebar sheet button table input

Then create components/layout/sidebar.tsx:

import { Sidebar, SidebarContent, SidebarGroup } from "@/components/ui/sidebar";

export function AppSidebar() {
  return (
    <Sidebar>
      <SidebarContent>
        <SidebarGroup>
          <a href="/dashboard">Dashboard</a>
          <a href="/products">Products</a>
          {/* Future modules added here */}
        </SidebarGroup>
      </SidebarContent>
    </Sidebar>
  );
}

Wrap your layout with <SidebarProvider> for a professional, responsive sidebar ready for Part 2 and 3 modules.

Conclusion & What’s Next

Summary of Part 1

You now have:

Secure multi-user authentication with Auth.js
Full RBAC using Next.js middleware + roles in Prisma
Complete Product Master Data (Server Actions + Zod validation + soft deletes)
Modern dashboard with shadcn/ui + Tailwind

You have built the foundation that every successful ERP needs completely in Next.js.

Preview for Part 2

We will connect the dots:

Real-time stock transactions with optimistic updates
Purchase Order (PO) module with approval workflow
Automatic stock updates using Server Actions + revalidation

Preview for Part 2

We will connect the dots:

Real-time stock transactions
Purchase Order (PO) module with approval workflow
Automatic stock updates when PO is received

Download the complete source code for Part 1 (including all migrations, seeders, and controllers) from:

Looking for a professional team to build this for you? If you want to skip the DIY and have experts handle the build, call us at tujuhsembilan.com.

See you in Part 2 where the real ERP magic begins.

Happy coding! !

#NextJS #NextJS15 #ERPDevelopment #ModularArchitecture #FullStackDevelopment #ReactServerComponents #PrismaORM #AuthJS #RBAC #TypeScript #PostgreSQL #MySQL #TailwindCSS #ShadcnUI #ZodValidation #EnterpriseSoftware #WebAppArchitecture #ScalableSystems #SoftwareEngineering #CleanArchitecture #AppRouter #ServerActions #ModernWebDevelopment #ERPSystem #SaaSDevelopment

#DatabaseDesign #ERDDesign #SecureAuthentication #RoleBasedAccessControl #ProductionReady #TechTutorial #CodingGuide #DeveloperBlog

References

https://nextjs.org/docs

https://authjs.dev

https://www.prisma.io/docs

https://ui.shadcn.com

https://tailwindcss.com/docs

https://zod.dev

https://www.typescriptlang.org/docs

https://www.postgresql.org/docs

https://react.dev/learn

https://nextjs.org/blog

https://vercel.com/docs

https://www.prisma.io/dataguide