When will you use this?

Reach for data fetching and Server Actions when pages need database content or form submissions.

• Enrollments, quiz scores, and course progress load from the server — often with Server Actions.
• Forms that enroll a student in a course use Server Actions instead of a separate REST call.

Real-world: Zoho-style SaaS dashboard

The B2B SaaS team building Zoho-style SaaS dashboard uses Database Integration to persist courses, users, and enrollments in PostgreSQL or MongoDB. tenant admins never see the TypeScript files — they just get a fast, reliable billing, team settings, and analytics widgets.

Production-style code

// lib/db.ts — concept with Prisma (install in later lesson)
import { PrismaClient } from '@prisma/client';

const globalForPrisma = globalThis as unknown as { prisma: PrismaClient };

export const prisma = globalForPrisma.prisma ?? new PrismaClient();

if (process.env.NODE_ENV !== 'production') globalForPrisma.prisma = prisma;

// app/courses/page.tsx
export default async function CoursesPage() {
  const courses = await prisma.course.findMany({ orderBy: { title: 'asc' } });
  return <pre>{JSON.stringify(courses, null, 2)}</pre>;
}

What happens in production: In Zoho-style SaaS dashboard, getting Database Integration right means tenant admins trust the billing, team settings, and analytics widgets every day.

Lesson example (start here)

Copy this smaller example first. Once it works, compare it with the real-world code above.

// lib/db.ts — concept with Prisma (install in later lesson)
import { PrismaClient } from '@prisma/client';

const globalForPrisma = globalThis as unknown as { prisma: PrismaClient };

export const prisma = globalForPrisma.prisma ?? new PrismaClient();

if (process.env.NODE_ENV !== 'production') globalForPrisma.prisma = prisma;

// app/courses/page.tsx
export default async function CoursesPage() {
  const courses = await prisma.course.findMany({ orderBy: { title: 'asc' } });
  return <pre>{JSON.stringify(courses, null, 2)}</pre>;
}

Line-by-line walkthrough

How it works (big picture)

• Singleton Prisma client avoids connection storms in dev hot reload.
• findMany runs SQL on the server.
• Never import prisma in Client Components.

Do this on your computer

1. Choose PostgreSQL locally or hosted (Neon, Supabase)
2. Plan tables: User, Course, Enrollment, LessonProgress
3. Sketch Prisma schema on paper
4. Wire DATABASE_URL in .env.local
5. Read the real-world section and name which part of LearnHub uses this topic.
6. Run the example locally with npm run dev and confirm the same behavior.
7. Change one value in the example (route, text, or course id) and predict what will happen before you save.

Experiments — try changing this

• Change a string or route in the example and save — watch the browser update.
• Break the code on purpose (remove a bracket), read the error overlay, then fix it.
• Change the API URL or course id and see how the page data changes.
• Use npm run dev while editing Database Integration — the page hot-reloads on save.

Remember

DB access stays server-side. ORM helpers like Prisma are common. Use env DATABASE_URL for connection string.

Common questions